html - 直接减小浏览器宽度和在 Chrome 设备工具栏中减小时的不同结果

Question

这是我将浏览器宽度减小到 740px 时的结果。没有滚动条； 宽度相同但在 Chrome 设备工具栏中 现在出现滚动条。 发生这种情况是因为我在某些 block 中使用了负右边距，但我也使用了

body { overflow-x: hidden }

防止滚动。在我打开 chrome 设备工具栏之前，它工作得很好。这种行为的原因是什么？我不应该使用负边距吗？

Answer 1

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

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

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

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

尝试删除 -device-从您的媒体查询改为如下所示:

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

这应该在移动设备和桌面设备上应用您的 CSS 更改。

---

还要确保您的 HTML header 中包含以下代码，以确保正确配置视口(viewport):

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

希望这对您有所帮助!