如何“欺骗”媒体查询？ 如何伪造窗户的宽度？

我正在开发响应式网站，你们都知道手动缩小浏览器窗口有点舒服（此外，Firefox不允许我在一个值之后这样做）。 所以我决定编写一个jQuery“插件”来缩小区域 – 或者+按钮。

一旦我写了这个：

$(document).ready(function() { var doResizing = function(increaseWith) { if ($('#xxxx').length == 0) { $('body').css('margin', 0).css('padding', 0); $('body > *').wrapAll('
'); $('#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(''); $('#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'); } 

Answer 2

Chrome具有内置function：

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

Answer 3

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

或者只需Ctrl + Shift + M

这将使您可以使用小视图端口大小，它还会将滚动条拖动到较小的位置，并覆盖 – 所以您没有那个也可以处理。 （它就在那里，非常小，就像一部手机）

创建预设尺寸，切换方向 – 很好。

道歉，也是在评论中看到的，反正..

Answer 4

Firefox有一个附加组件： https ： //addons.mozilla.org/de/firefox/addon/more-display-resolutions/