移动视图中的不同渲染和手动浏览器调整大小答案

【问题标题】：Different rendering in mobile view and manual browser resize移动视图中的不同渲染和手动浏览器调整大小
【发布时间】：2023-03-20 08:20:01
【问题描述】：

我遇到了一个奇怪的行为，我找不到这种行为的原因。 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 覆盖了视口宽度的 100%，但是当我在设备模拟器（开发人员工具）中调整窗口大小时，子 DIV 的收缩速度比视口快，并且窗口右侧出现空白。

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

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

更多检查：

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

【问题讨论】：

标签： html css google-chrome responsive-design

【解决方案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;
}

【讨论】：