css - 网站在移动浏览器中看起来不正确

Question

我现在正在构建一个网站，当我在移动浏览器上加载该网站时，一些元素被推到左边，在右边留下一个难看的空白：

我的猜测是，大米色矩形（直接在导航下方）的宽度大于其下方的包装。注意：矩形不包含在包装器中。但是，我尝试了几种不同的方法，但我仍然得到右边的空白。

有人可以帮我指出我哪里出错了吗？

Answer 1

页面上的元素具有各种不同的宽度，例如#pinboard div，它的宽度为 1123 像素——比其他一些元素（例如 nav 1000 像素）要宽一些。这会在其他较窄的元素和屏幕边缘之间留下空白。（作为测试，缩小您的浏览器窗口，您会在页面底部看到一个水平滚动条，比您预期的要早。）

如果你给所有的东西同样的宽度，事情应该看起来好多了。

Answer 2

过去，视口元标记已为我解决了此类问题，请尝试将其添加到您的 HTML 标头中：

<meta name="viewport" content="width=device-width">

Answer 3

尝试检查您是否有任何提到左或右的 CSS。还是绝对的？

Answer 4

您网站中少数元素的宽度不同。

例如：

#幻灯片：宽度：1174像素；
.menu-main-container：宽度：1000px；

iPhone 采用最大宽度。请使用相同的宽度或使用包装纸并将所有东西都放入其中。