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

Question

我正在本地开发我的网站，并使用 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)

Answer 1

移动设备仿真可作为 built-in feature 使用。适用于 Chrome，目前处于 Beta channel 。您需要在 DevTools 设置中启用它。