如何对媒体查询“撒谎”？如何伪造窗口的宽度？

Posted 2023-03-06

技术标签:

【中文标题】如何对媒体查询“撒谎”？如何伪造窗口的宽度？【英文标题】：How to "lie" to mediaquery? How to fake the width of window? 【发布时间】：2014-03-01 14:49:01 【问题描述】：

我正在开发响应式网站，你们都知道手动缩小浏览器窗口有点不舒服（而且，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);
        
    );
);

它可以检查，但即使媒体查询的正确定义，它也不会买它。那么如何在没有实际调整窗口大小的情况下对媒体查询说宽度发生了变化？

【问题讨论】：

注意：如果您使用的是 chrome，您可以在开发者工具中模拟较小的屏幕 我可以问一下，调整窗口本身的大小有什么问题吗？ :X 因为 ifs 仍然更容易按 + 或 - 而不是触摸鼠标:) 在 FireFox 中使用 Ctrl + Shift + M 还不够好吗？哦，我什至不知道，但是这样就不会垂直滚动 【参考方案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');

【讨论】：

这样做会从我的页面中删除所有样式。这有什么原因吗？【参考方案2】：

Chrome 有一个内置功能：

如果您没有看到设置，请转到： Settings > Devices > [Choose your devices]

【讨论】：

我只在我的 chrome 中看到控制台和搜索。我错过了什么吗？【参考方案3】：

在 Firefox 中 - Tools / Web Developer / Responsive Design View

或者直接点击Ctrl + Shift + M

这将使您的视口尺寸变小，它还会使滚动条变小并覆盖 - 所以您也不必处理这些问题。（它就在那里，只是很小，就像手机一样）

创建预设尺寸，切换方向 - 王牌。

抱歉，刚刚在评论中也看到了这个，无论如何..

【讨论】：