3

できればCSSのみを使用して、モバイルデバイスで水平方向のページスクロールを防ぐ方法はありますか?

例を次に示します: http://jsfiddle.net/YfLst/15/

更新:次のコードは iOS では問題を解決しますが、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">

そして、ボディ幅を100％に設定し、overflow-x：非表示にするか、絶対に配置してみてください

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 モバイルでは、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 に答える