水平滚动条出现在所有移动浏览器中

Question

我有一个非常简单的网站，它在下面创建一个水平滚动条：

安卓：

铬

火狐

迷你歌剧

不在 Android 默认浏览器中，但网站看起来已损坏

iOS：

Safari

---

这真的没什么大不了，但我将我的网站与 http://google.com 的完整桌面网站进行比较，而 Google 的网站没有遇到与我相同的问题。

我对 CSS 和 HTML 还是很陌生，我觉得我正在打破一些我不知道的非常简单的规则，这会造成这个问题。有关如何解决此问题的任何想法？

如果你想测试它。转至http://natio.in

Answer 1

出现水平滚动条是因为您在元素上设置了固定宽度，当在移动浏览器上查看网站时，这些元素的宽度设置为比视口宽度更宽。如果您对宽度使用百分比，您的网页将能够进行相应的调整。

Answer 2

好吧，您可以在 body 标签的样式中包含 overflow-x: hidden;，但如果有超出手机宽度的内容，您将无法访问它。或者，您可以使用媒体查询创建响应式布局。