Javascript -模拟CSS媒体查询？

Question

在我的CSS文件中有：

@media (max-width: 480px) {
  div {
     background: red;
  }
}

模拟javascript

有没有办法用Javascript来模拟480 to设备的宽度？我正在考虑一个按钮与点击事件，以使CSS更深的设备是最大480 max宽度。

如果可能的话，我将使用jQuery来模拟媒体查询。

Answer 1

您可以在JS中手动设置viewport，这可能是解决方案。这个问题涵盖了Dynamic viewport

将内容属性设置为包含width参数：

document.getElementById("viewport").setAttribute("content", "width=1024, initial-scale=0, maximum-scale=1.0, minimum-scale=0.25, user-scalable=yes");

来自http://www.wearecube.ch/how-to-do-responsive-optout-by-setting-the-view-port-with-javascript-or-ruby-on-rails/

Answer 2

点击F12，然后转到仿真选项卡(IE)，打开控制台抽屉，点击模拟(Chrome)，或者其他你正在使用的浏览器。

在这里，您可以模仿任何屏幕或设备规格，您想要测试。