jquery - 如何将 "lie"转为 mediaquery？如何伪造窗口的宽度？

Question

我正在开发响应式网站，你们都知道手动缩小浏览器窗口有点不自在(而且，Firefox 不允许我在一个值后这样做)。所以我决定编写一个 jQuery“插件”来缩小带有 - 或 + 按钮的区域。

一旦我写了这个:

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

它可以检查，但即使媒体查询的定义正确，它也不会购买。那么如何在不实际调整窗口大小的情况下告诉媒体查询宽度已更改？

Answer 1

问题是媒体查询仍然以全宽显示页面。您可以稍微调整代码以获取页面并将其嵌入到 iframe 中并调整 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');
}