できればCSSのみを使用して、モバイルデバイスで水平方向のページスクロールを防ぐ方法はありますか?
例を次に示します: http://jsfiddle.net/YfLst/15/
更新:次のコードは iOS では問題を解決しますが、Android では問題が残ります。
html, body {
overflow-x: hidden !important;
position: relative !important;
}
できればCSSのみを使用して、モバイルデバイスで水平方向のページスクロールを防ぐ方法はありますか?
例を次に示します: http://jsfiddle.net/YfLst/15/
更新:次のコードは iOS では問題を解決しますが、Android では問題が残ります。
html, body {
overflow-x: hidden !important;
position: relative !important;
}
これを行うには、さまざまな方法があります。
特別なスタイルシートを使用してモバイルデバイスをターゲットにすることができます
<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">
CSSではありませんが、ドキュメントを画面の幅より広くすることはできず、問題は発生しません。
それ以外の場合は、次のようなjavascript / jqueryソリューションを使用する必要があります:http://forum.jquery.com/topic/scrollview-make-page-not-scrollable
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 はそれを自動的に行います。