如何在浏览器中模拟设备宽度和方向来测试媒体查询？

Posted 2023-03-06

【中文标题】如何在浏览器中模拟设备宽度和方向来测试媒体查询？

【英文标题】：How to simulate device-width and orientation in browser to test media queries?

【发布时间】：2014-01-03 05:48:30

【问题描述】：

我正在本地开发我的网站并使用 Chrome 随时预览它。虽然调整浏览器的大小以测试使用max/min-width 的媒体查询真的很容易，但据我所知，用任何内置设置模拟max/min-device-width 是不可能的。是否有 Chrome 扩展程序可以模拟移动设备并触发媒体查询，特别是 max/min-device-width 和 orientation:portrait/landscape？

我基本上想在我的计算机而不是智能手机上使用 Chrome 测试这个媒体查询：@media only screen and (max-device-width: 600px) and (orientation: portrait)

【问题讨论】：

如果您无法通过谷歌搜索找到它，它可能不存在。我不依赖浏览器调整大小，最好在实际设备上进行测试或加入 crossbrowsertesting.com 并避免使用模拟器，他们有很多设备。此外，mattkersley.com/responsive 仅用于查看各种尺寸。

我需要本地解决方案。我不想调整、上传、刷新、重复。否则我只会使用我的物理设备。 Chrome 扩展程序将是完美的！

见Faking max-device-width。如果您使用的是 Chrome，用户 wasabi 的回答可能会对您有所帮助。

@AntoJurković 谢谢，但不幸的是没有成功。它没有以正确的大小呈现各种 UI 元素，包括字体和 SVG 文件。

移动仿真在 Beta 频道中可用 blog.chromium.org/2013/12/… developers.google.com/chrome-developer-tools/docs/…

【参考方案1】：

试试这个...我认为这正是您需要的... https://chrome.google.com/webstore/detail/responsiview/kcemonjjmilbiepahkhanlkddonpjlep?hl=en-US

【讨论】：

谢谢，但我实际上在发布之前尝试了该扩展程序。问题在于它不能模拟device-width——只有普通的width。此外，对于本地文件根本不起作用。

似乎为我模拟设备宽度。不确定本地测试，我只是将它与现场示例一起使用。

【参考方案2】：

移动设备模拟在 Chrome 中以 built-in feature 的形式提供，目前处于 Beta 通道中。您需要在 DevTools 设置中启用它。