禁用iPhone网站上的水平滚动

我正在开发Wordpress驱动的网站的iPhone版本，我想知道是否有任何方法来禁用水平滚动，当网站在Safari的iPhone打开。现在，我已经完成了一半的开发工作，只是为了检查是否可以禁用水平滚动，我隐藏了超过屏幕宽度的任何元素，但仍然可以水平滚动到右侧。我试着把下面的代码放在<head>的<style>标签里面，但是没有帮助：禁用iPhone网站上的水平滚动

body {overflow-x：hidden; }

我已经把下面<meta>代码的头文件中，如果用户正在查看从iPhone的网站呼应，但它仅禁止用户捏即你不能放大，捏住屏幕缩小。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

我目前使用的是iPhone 4，检查网站和网站可以前往以下链接访问：http://ignoremusic.com。期待着你们的解决方案，谢谢。

SOLUTION：正如@Riskbreaker建议，有哪些是超过〜312px的宽度是少数几个元素，为什么我仍然可以向左侧滑动并调整所有这些元素的宽度后，我禁用了水平滑动。我学到的一件事是隐藏 overflow-x在iPhone/iPad的情况下没有帮助，您必须将所有元素的宽度减少到您的屏幕宽度的宽度，否则您仍然会能够水平滑动。

来源

2013-04-08 Fahad Hasan

所以根据你的“解决方案”部分 - 是否有办法强制禁用水平滚动，如果有离屏元素？ – 2016-12-22 22:43:19

加在你的身上溢出这样的：

body { 
     font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif; 
     font-weight: normal; 
     overflow: hidden; 
     overflow-y: auto; 
     }

而且是留在这样的：

<meta name="viewport" content="width=device-width">

来源

2013-04-08 13:14:31 Riskbreaker

谢谢您的回复，但添加CSS代码无效，我仍然可以水平滚动。 – 2013-04-08 13:33:41

你是否在style.css或你的主css上添加了这个？还有一些CSS会在你的响应中被忽略，像这样：'#headertop {width：980px;}'......这会使水平滑动...只需要一个需要修复的例子... – Riskbreaker 2013-04-08 13:46:36

只是为了检查它是否工作，我使用

禁用iPhone网站上的水平滚动

回答