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

Question

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

安卓：

铬合金

火狐

歌剧迷你

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

IOS：

苹果浏览器

---

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

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

如果你想测试它。访问http://natio.in

Answer 1

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

Answer 2

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