防止 jQuery Mobile 上的水平滚动答案

【问题标题】：Prevent horizontal scroll on jQuery Mobile防止 jQuery Mobile 上的水平滚动
【发布时间】：2012-07-03 13:48:54
【问题描述】：

有没有办法防止移动设备上的水平页面滚动，最好只使用 CSS？

更新：以下代码解决了 iOS 上的问题，但问题仍然存在于 Android 上：

html, body {
    overflow-x: hidden !important;
    position: relative !important;
}

【问题讨论】：

标签： javascript jquery html css mobile

【解决方案1】：

有不同的方法可以做到这一点：

您可以使用特殊样式表定位移动设备

<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">

并将body宽度设置为100%并overflow-x: hidden，甚至尝试绝对定位

body {
  width: 100%;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

在 CSS 中。

如果“阻止水平滚动”是指您的视口（显示在移动屏幕上的区域）太窄而应该更大，您应该在元标记中相应地设置视口宽度

    <meta content="width = 999 (for example)" name="viewport">

【讨论】：

视口设置为：<meta name="viewport" content="width=device-width, initial-scale=1">。我试过position: absolute 和width: 100% 问题仍然存在。
我们在谈论什么移动设备，所以我可以重现这种情况吗？
另一件事是：如果你用device-width定义宽度，初始比例为1，页面是，比如说500px宽，设备宽度是300，没有办法阻止水平滚动，因为它是让用户浏览页面的移动操作系统的一部分。如果你的页面是 500px 宽并且你想防止水平滚动，你必须确保视口的宽度至少设置为 500，并且初始比例是设备决定的。
我已经更新了问题，表明可以在 iOS 上阻止水平滚动，但问题在 Android 上仍然存在。我们正在 iPad 和 Asus Transformer 上进行测试。
对于 android，这应该会有所帮助：stackoverflow.com/questions/2527899/…

【解决方案2】：

不使用 CSS，但您可以使文档的宽度不超过屏幕，这样就不会有问题。

否则，您将不得不使用 javascript/jquery 解决方案，如下所示：http://forum.jquery.com/topic/scrollview-make-page-not-scrollable

【讨论】：

【解决方案3】：

使用 jQuery mobile，css 文件的顺序很重要。我必须做的是确保在 jQuery Mobile css 之前包含我的主题 css，而不是像这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <link rel="stylesheet" type="text/css" href="css/themes/green-theme.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure.min.css" />

如果你查看 jQuery Mobile 的 css，你会看到防止水平滚动的代码：

body.ui-mobile-viewport, div.ui-mobile-viewport {
    overflow-x: hidden;
}

您甚至不必将任何类添加到您的 body 标记中。 jQuery mobile 会自动完成。

【讨论】：