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

Question

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

机器人：

铬

火狐

Opera Mini

不在Android默认浏览器中，但网站看起来很破碎

的iOS：

Safari浏览器

---

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

我仍然是CSS和HTML的新手，我觉得我打破了一些非常简单的规则，我不知道这是创造这个问题。关于如何解决这个问题的任何想法？

如果您想测试它。转到http://natio.in

Answer 1

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

Answer 2

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