从iPhone优化页面中移除水平移动/摆动

问题描述：

我正在尝试优化iPhone的新闻页面。我注意到的一个问题是我可以水平地点击和移动页面（即摆动）。从iPhone优化页面中移除水平移动/摆动

我的问题是，我怎样才能防止这种水平运动发生？

我们所有的新闻页面都有这个问题。这里有几个例子：

答

在身体上添加“overflow-x：hidden”。

答

考虑从其他网站的想法，很多大网站都有一个移动网站。看看那些（我知道的唯一一个是facebook m.facebook.com），你可以看看css是如何完成的。可能的做法是％。我会建议去掉手机版的边栏。应该取出大图片或调整大小，以便浏览器没有并排滚动条。

我需要为桌面和移动版本使用相同的HTML页面。他们对iPhone进行优化的方式是在侧边栏上使用display：none。有一个更好的方法吗？ – Ryan 2011-05-26 23:20:22

答

您可以尝试设置user-scalable = 0;并看看是否有任何影响。

感谢您的建议。不幸的是它仍然在水平滚动。你知道还有什么我可以尝试吗？ – Ryan 2011-05-26 23:18:58

这听起来像你的页面元素之一是> 320px – jaminguy 2011-05-27 01:10:35

我无法弄清楚它是什么。我试过删除页面中的所有内容。然后它归结为一个CSS文件，或jQuery，或我的视口元。每次我删除一个修复它，但这些都是关键文件。我不确定是什么原因造成的。 – Ryan 2011-05-27 23:17:42

答

东西肯定比您的设备宽度大。将以下内容添加到您的css中找到罪魁祸首。

* { border-style:solid; }

然后，您可以缩小设置border-color:red;个人类/标签/ IDS搜索。

现在我明白了为什么会发生这种情况，我自己也无法找到答案，非常感谢 – 2015-05-29 12:55:33

'overflow-x：hidden'不适合我，但这很快找到了罪魁祸首，谢谢。 – 2016-01-19 16:14:33

答

这也发生在我身上，这是一个额外的关闭div标签的结果。一旦我删除额外的</div>，水平“摆动”不再发生。

答

我也是，iPhone上的“摇摆”在网页上。它最终由一个比它所在列宽度更宽的图像引起（这是使用Twitter Bootstrap的行中的最后一列）。您可能会想到“明显”，但很难发现图像背景何时与页面背景相匹配。

只是使图像响应，或小于列宽 - 它解决了我。