如何“撒谎"到mediaquery?如何伪造窗户的宽度? [英] How to "lie" to mediaquery? How to fake the width of window?

问题描述

我正在开发响应式网站，并且大家都知道手动缩小浏览器窗口有点不舒服(此外，Firefox不允许我追求价值).因此，我决定编写一个jQuery插件"以使用-或+按钮缩小区域.

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.

一旦我写了这个:

$(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);
        }
    });
});

可以检查，但是即使媒体查询定义正确，它也不会购买.那么如何对mediaquery说宽度已经改变了，而没有实际调整窗口的大小?

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?

推荐答案

问题是媒体查询仍在全屏显示页面.您可以稍微修改一下代码，以获取页面并将其嵌入到iframe中并调整iFrame的大小:

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

这篇关于如何“撒谎"到mediaquery?如何伪造窗户的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！