我的移动网站出现水平滚动

Question

我正在为一位朋友制作一个移动网站--我使用媒体查询来调整她的网站，使其在任何智能手机上观看时都更具移动性。

感觉我已经完成了这个网页--但是当我在我的手机上查看它时，iPhone3GS和htc难以置信，它就像你可以水平滚动2-3个像素。一些元素弄乱了这个，我的头发变白了，因为我真的找不出是哪一个。

我该如何解决这个问题？

网页链接

http://www.linaahlen.se/

Answer 1

在Chrome中快速查看一下检查器，它看起来就是这个属性：

div.entry {
    padding: 0em 1em;
}

样式-响应.css的第106行-它将内容推送到只有几个像素宽的位置，并将其更改为适合我的padding: 0 0.8em;。

哦，只是为了记录，它是水平滚动，而不是垂直滚动！

Answer 2

晚了，但供将来参考。我想指出寻找问题原因的方法。使用Google Chrome Device Mode打开站点。然后检查问题是否存在(此解决方案依赖于问题在设备模式中出现)。然后从头、内容容器等较大的元素开始，逐个设置"display: none“给元素，并在隐藏每个元素后检查不需要的滚动性是否消失。通过这种方式，您可以找到问题的原因。

我也有同样的问题，一开始我试图通过查看每个元素的CSS代码来找出原因，浪费了很多时间，也找不到原因。也许浏览器可以比人类阅读的CSS更好地呈现页面。