Question

这是我将眉毛宽度减少到740px时的结果。没有滚动条; 相同宽度但在chrome设备工具栏中现在出现滚动条。发生这种情况是因为我在某些区块中使用负右边距，但我也使用

body { overflow-x: hidden }

防止滚动。它完美无缺，直到我打开chrome设备工具栏。这种行为的原因是什么？我不应该使用负边际吗？

Answer 1

chrome工具用于移动设备测试。它实际上在移动设备中显示相同。没有chrome工具，它将显示桌面浏览器compatibility.chrome工具

因此，Chrome工具实际上提供的视图与移动设备大致相同。对于移动视图测试，最好使用chrome工具进行响应模式。

chrome工具使用用户代理。用户代理类型或设备类型设置允许您更改设备的类型。可能的值有：

移动

<强>桌面

触摸桌面

Answer 2

我遇到了类似的问题，并找到了可能对您有帮助的答案here.

对我来说，问题是我使用的媒体查询看起来像这样：

@media only screen and (max-device-width: 600px) {...}

选择器的-device-部分确保您的CSS仅应用于移动设备。因此， chrome设备工具栏 专门用于测试移动设备上的CSS，这可能是您看到css在那里正确应用的原因，但不是在您自己调整浏览器窗口大小时。

尝试从媒体查询中删除-device-，如下所示：

@media only screen and (max-width: 600px) {...}

哪些应该在移动设备和桌面上应用CSS更改。

还要确保HTML标头中包含以下代码，以确保正确配置视口：

<meta content="initial-scale=1.0, width=device-width" name="viewport">

希望这有帮助！