我遇到了一种奇怪的行为，但我找不到这种行为的原因。 My websites当我手动调整 Google Chrome 的大小时和当我在设备模拟器中检查网站(使用开发人员工具)时，有两种不同的渲染。
简介:
<html>
<body>
<div>
//Entire the codes here with no overflowed element
</div>
</body>
</html>
我在 HTML 和 BODY 标签的 width 上没有样式。 body 的直接子元素还是一个 DIV，没有宽度样式(因此它应该覆盖 100%)。当我手动调整窗口大小时，DIV 覆盖视口(viewport)宽度的 100%，但是当我在设备模拟器(开发人员工具)中调整窗口大小时，子 DIV 的收缩速度比视口(viewport)快，并且空白出现在窗口右侧。
在真实的移动设备中，当我查看网站时，顶部菜单图标超出屏幕宽度，我可以看到这个图标的一半，所以看起来设备模拟器中的渲染才是真正的逻辑碰巧是一个真实的设备。如果您在真实设备中缩小网页，菜单图标会返回屏幕，但我已经设置了以下内容，我希望页面默认以全宽打开但它似乎放大了，我可以在页面后 oom out负载):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
更多检查:
- 当我检查元素时，正文和 html 中没有计算出的填充和边距。
- 我已经从网页中删除了 AOS 库，以确保第三方库没有产生边距和填充但没有变化。
- 我已经为 body 测试了
overflow-x:0以确保没有溢出元素但没有变化。
最佳答案
您有一个 div，它的位置超出了网站的宽度(视口(viewport)):
<div style="position:absolute;left:calc(10% + 350px);top:120px;color:#f57f20;font-size:20pt;">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">
with Plan
</font>
</font>
</div>
注意 calc(10% + 350px)。
顺便说一句，如果你想剪掉多余部分，你可以像这样设置 html 标签(不是 body 标签)的样式:
html {
overflow-x: hidden;
}
关于html - 移动 View 中的不同呈现和手动浏览器调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58798475/