为什么我的页面在调整窗口大小时与在 Chrome 移动查看器中看起来不同？答案

【问题标题】：Why does my page look different when resizing window than in Chrome mobile viewer?为什么我的页面在调整窗口大小时与在 Chrome 移动查看器中看起来不同？
【发布时间】：2021-04-10 15:41:19
【问题描述】：

我正在尝试使我的网页具有响应性，但我不知道哪种视图是正确的。当我在 chrome 中正常打开它并调整窗口大小时，它看起来很正常（图 1）。但是当我检查元素并在移动查看器中查看页面时，它看起来完全不同（图 2）。哪一个是正确的？

Chrome resized - Image 1

Chrome mobile viewer - Image 2

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

两者都是正确的。通过按CTRL + SHIFT + C（Mac 上为cmd + shift + c）使用检查器，然后将鼠标悬停/单击您想要了解更多信息的元素。这将帮助您了解在不同视口宽度下发生的情况。

你也可以右键点击元素，点击Inspect Element

另外，请确保您的 html 具有以下标记：

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

【讨论】：

非常感谢！我完全忘记添加那个元标记，我通常记得，但这次我不知何故忘记了。

【解决方案2】：

可能有一个元素在 y 轴上溢出。使页面更宽。因为你可能有 100% 宽度的导航栏和 flex 对齐，它看起来像这样。使用检查器检查是否没有元素溢出。

【讨论】：