3

Is there a way to prevent horizontal page scroll on a mobile device preferably with CSS only?

Here's an example: http://jsfiddle.net/YfLst/15/

Update: The following code solves the issue on iOS but the problem remains on Android:

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

3 回答 3

3

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

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

<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">
于 2012-07-03T13:55:52.217 回答
0

不使用 CSS，但您可以使您的文档不比屏幕宽，并且您不会遇到问题。

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

于 2012-07-03T13:55:41.823 回答
0

使用 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 会自动完成。

于 2014-02-13T23:56:39.370 回答