Chrome 开发者工具显示的屏幕比我在响应模式下设置的大

Posted 2023-03-07

【中文标题】Chrome 开发者工具显示的屏幕比我在响应模式下设置的大

【英文标题】：Chrome Developer Tools displaying screen larger than I set in responsive mode

【发布时间】：2017-03-13 18:54:07

【问题描述】：

我正在使用 chrome 开发者工具并打开响应模式。将宽度和高度设置为移动尺寸（320 x 568、360 x 640 等）。

移动设备的媒体查询未加载。 jQuery 和 chrome dev-tools 中的 size-helper 都显示 980px 的宽度，比我设置的要大很多。

额外信息：我将我的网页放在部署服务器中，并使用 chrome 扩展程序作为模拟器，因为我无法相信 Chrome 的措施。

在部署服务器中它以某种方式像 chrome 一样工作（因此代码可能有些奇怪），但在模拟器插件中并调整 chrome 窗口的大小（不使用响应工具）我可以看到我的断点已到达。

有人遇到过这个问题吗？ 谁能至少解释一下为什么 chrome 会忽略我要求的尺寸？

【参考方案1】：

您可能需要包括：

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

在您的 html 文件的顶部...

【讨论】：

你是对的。我不知道 chrome 依赖视口元标记来呈现响应式布局。所以它非常准确。谢谢

想知道为什么这不是公认的答案，即使它看起来已经解决了 OP 的问题！顺便说一句，它也解决了我的问题+1。

【参考方案2】：

不需要 user-scalabe=0，没有它也可以正常工作。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />