How to "lie" to mediaquery? How to fake the width of window?

Question

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?

Answer 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');
}