How to “lie” to mediaquery? How to fake the width

问题:

Im developing responsive sites, and you all know its a bit comfortless to manually shrink the window of browser (moreover, Firefox doesnt let me do it after a value). So I decided to write a jQuery "plugin" to shrink the area with - or + buttons.

Once I wrote this:

$(document).ready(function() {
    var doResizing = function(increaseWith) {
        if ($('#xxxx').length == 0) {
            $('body').css('margin', 0).css('padding', 0);
            $('body > *').wrapAll('<div id="xxxx" /></div>');

            $('#xxxx').css('background-color', 'red')
                .css('overflow', 'scroll')
                .css('padding', 0)
                .css('margin', 0)
                .css('position', 'absolute')
                .width('100%');
        }
        $('#xxxx').height(parseInt($(window).height()) + 'px').width(parseInt($('#xxxx').width())+increaseWith + 'px');
    }

    $(document).keypress(function(e) {
        if (e.which == 45) {
            doResizing (-10);
        }

        if (e.which == 43) {
            doResizing (+10);
        }
    });
});

its OK for checking, but even with the correct definition of media query, it wont buy it. Then how to say to the mediaquery that width has changed, without actually resizing the window?

回答1:

The issue is that the media query is still seeing the page at full width. You could adapt your code slightly to take the page and embed it into an iframe and resize the iFrame:

var doResizing = function (increaseWith) {
     if ($('#xxxx').length == 0) {
            $('body').css('margin', 0).css('padding', 0);
            $('body > *').wrapAll('<iframe id="xxxx" src="' + window.Location + '" /></iframe>');
            $('#xxxx').css('background-color', 'red').css('overflow', 'scroll').css('padding', 0).css('margin', 0).css('position', 'absolute').width('100%');
    }
    $('#xxxx').height(parseInt($(window).height()) + 'px').width(parseInt($('#xxxx').width()) + increaseWith + 'px');
}

回答2:

Chrome has an inbuilt function for that:

If you don't see the setting go to:
Settings > Devices > [Choose your devices]

回答3:

In Firefox - Tools / Web Developer / Responsive Design View

Or just hit Ctrl + Shift + M

This will let you get down to small view port sizes, it also drops the scroll bar to small, and overlay - so you don't have that to deal with too. ( it's there, just very small, like a mobile )

Create preset sizes, switch orientation - well ace.

Apologies, just seen this in a comment too , anyways ..

回答4:

There is a add-on for Firefox that does that: https://addons.mozilla.org/de/firefox/addon/more-display-resolutions/