Question

我正在开发一个由Wordpress驱动的网站的iPhone版本，我想知道在Safari for iPhone中打开网站时是否有任何禁用水平滚动的方法。现在，我正处于开发的一半，只是为了检查是否可以禁用水平滚动，我隐藏了任何超出屏幕宽度的元素，但我仍然可以向右水平滚动。我尝试将以下代码放在<style>的{{1}}代码中，但这并没有帮助：

body {overflow-x：hidden; }

我已经在头文件中放置了以下<head>代码，以便在用户从iPhone查看网站时回显，但它只会禁用用户捏合，即您无法通过捏住屏幕来放大和缩小。

<meta>

我目前正在使用iPhone 4查看网站，可以通过以下链接访问该网站：http://ignoremusic.com。期待你们的解决方案，谢谢。

解决方案：正如@Riskbreaker所建议的那样，有一些元素超出了~312px的宽度，这就是为什么我仍然可以在调整所有这些元素的宽度后向左滑动，我禁用了水平滑动。我学到的一件事就是隐藏 overflow-x对iPhone / iPad没有帮助，你必须这样做将所有元素的宽度减小到您的宽度屏幕，否则你仍然可以水平滑动。

Answer 1

我知道我参加聚会有点晚了，但我遇到了同样的问题并通过添加以下内容解决了这个问题：

body, html{
    overflow-x: hidden;
}

希望这会帮助别人！

Answer 2

在你的身上添加溢出物：

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">

Answer 3

我在视口区域外的移动菜单遇到了同样的问题。 overflow-x：隐藏在Android手机中解决，但在iPhone手机中没有。我通过将'绝对'更改为'固定'位置来解决问题：

body { overflow-x: hidden; }    
nav { position: absolute; width: 300px; right: -300px; }

为：

body { overflow-x: hidden; }    
nav { position: fixed; width: 300px; right: -300px; }

希望它有所帮助。

Answer 4

对我来说，这也解决了这个问题：

dataset = data.frame(Week=c(35,35,36,36,37,37,35,35,36,36,37,37),
                     Hour = c(1,2,1,2,1,2,1,2,1,2,1,2),
                     Amount = c(367,912,813,482,112,155,182,912,551,928,125,676))

通过最大宽度，屏幕似乎已固定。

禁用iPhone网站上的水平滚动

4 个答案: