web-dev-qa-db-ja.com

モバイルWebで水平スクロールを無効にする

サイトの特定の携帯電話で水平スクロールが表示される問題があります。 overflow-x：hiddenを配置しようとしましたが、機能していません。幅は自動であるため、実際には画面サイズに合わせてWebのサイズが自動的に変更されます。ブラックベリー、ノキアe52、およびWindowsモバイルで表示した場合を除き、他のすべての携帯電話は問題ありません。水平スクロールが表示されます。

何かアドバイス？ありがとうございました！

cssmobile-website
48
Sylph

デバイスの幅に幅を設定するには、次を使用します。

<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
65
jrosell

このCSSを追加するだけです：

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}
29
pollux1er

私はこの答えを見つけました stackoverflowについてはこちら これは私にとって完璧に機能します：

これをスタイリッシュに使う

body {
    overflow-x: hidden;
    width: 100%;
}

これをheadタグで使用します

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="Apple-mobile-web-app-capable" content="yes" />

身体にパディングがある場合の私のわずかな追加（デバイスが身体のコンテンツボックスに拡大縮小するのを防ぎ、水平スクロールバーを追加するため）：

body {
    overflow: hidden;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
23
Klaas van der Weij

私にとって、ビューポートメタタグは実際にはcaused Blackberryの水平スクロールの問題です。

私は削除しました content="initial-scale=1.0; maximum-scale=1.0;をビューポートタグから取得し、問題を修正しました。現在のビューポートタグは次のとおりです。

<meta name="viewport" content="user-scalable=0;"/>
6
James Lawruk

これは古い質問ですが、BlackBerryはoverflow-xまたはoverflow-yをサポートしていないことに注意してください。

私の投稿を参照してください こちら

2
samael

私はこれを使用して、ユーザーがズームインおよびズームアウトできるようにします。

<meta name="viewport" content="width=device-width;" />
2
michaelsp

これは、すべてのモバイルデバイスでポートレートモードとランドスケープモードの両方で機能します。

<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86">

1
Ron Royston