移动视图中的不同呈现和手动浏览器调整大小

Question

我遇到了一种奇怪的行为，我找不到这种行为的原因。 My websites 在我手动调整 Google Chrome 大小时和在设备模拟器（使用开发人员工具）中检查网站时有两种不同的渲染。

简介：

<html>
    <body>
        <div>
          //Entire the codes here with no overflowed element
        </div>
    </body>
</html>

HTML 和 BODY 标签的 width 没有样式。 body 的直接子元素再次是 DIV，宽度 没有样式 （所以它应该覆盖 100%）。当我手动调整 window 大小时，DIV 覆盖视口宽度的 100%，但是当我在设备模拟器（开发人员工具）中调整 window 大小时，子 DIV 是比视口缩小得更快，空白出现在 window.

的右侧

在真实的移动设备上，当我查看网站时，顶部菜单图标超出屏幕宽度，我可以看到这个图标的一半，所以看起来设备模拟器中的渲染是真实的发生的逻辑是真实的设备。如果您在真实设备中缩小网页，菜单图标会返回屏幕，但我已经设置了以下内容，我希望页面默认以全宽打开但它似乎放大了，我可以在页面后 oom out负载):

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

更多检查：

当我检查元素时，正文和 html 中没有计算出的填充和边距。
我已经从网页中删除了 AOS 库，以确保第三方库没有产生边距和填充但没有变化。
我已经测试了 overflow-x:0 正文以确保没有溢出元素但没有变化。

Answer 1

您有一个 div，它的位置超出了网站的宽度（视口）：

<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;
}

移动视图中的不同呈现和手动浏览器调整大小

Different rendering in mobile view and manual browser resize

html

css

google-chrome

responsive-design