モバイル機器で水平スクロールなくす

Last Updated: 2023 年 07 月 17 日 12のコメント
Horozontal-Scroll-in-Mobile-Device

モバイルデバイスで水平スクロールなくす

モバイルウェブで水平スクロール(水平スクロール)がある場合は、上記の図のように画面をタッチして左に移動させると、サイトが左右に動くようになって非常に不快になります。 モバイル機器で水平スクロールを無効にして、この問題を解決することができます。

モバイル機器で水平スクロールがされている場合は、次のような措置を取ってみます。

まず、以下のメタタグを ヘッダに追加します。 (既に存在する場合、既存のを交換します。)

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

いくつかのユーザーは、 content="initial-scale=1.0; maximum-scale=1.0;を削除したら、問題が解決されるともね。

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

iPhoneのなどApple iOSデバイスでの問題が表示される場合は、次のメタタグを追加するようにします。

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />

iOSデバイスでの問題については このstackoverflow記事で詳細を確認することができます。

私は上記の方法でも、モバイル機器で水平スクロールがなくならなかった。 代わりに、次のようなCSSコードをスタイルシートファイル(style.cssの)に追加したら、問題が解決されました。

/* 모바일 수평 스크롤 금지 */
html, body {
max-width: 100%;
overflow-x: hidden;
}

他にも次のようなCSSコードを試してみます。

body {
overflow: hidden;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

以上にモバイル機器で水平スクロールが生じる場合に水平スクロールをなくす方法について説明しました。

参照


12のコメント

コメント

  1. まず、次のメタタグをヘッダに追加します。 (既に存在する場合は既存のものを置き換えます。)

    これをどのようにするかもしれない初心者ですㅜㅜ助けてください
    headerにそのコードを追加するには?
    私のような初心者がその方法を学ぶことができる記事がありますか?

    応答
  2. こんにちは! AdSense 縦型広告の端がモバイルでどんどん切り取られる風に水平スクロール問題なので、ヨー方法を適用してみましたが、その広告が送出されませんでした。 もしこの場合、もう少し待つとサイズに合った広告が送出されるのでしょうか?

    応答
  3. おかげで一週間以上悩んでいた問題を一瞬で解決しました。
    スティッキー Pluginこれはうまくいきませんでした。
    他の木の橋でこのような良い情報を見つけるかどうかは本当に知りませんでした。
    良い情報ありがとうございます!

    応答
    • んでこんにちは、さん?
      ブログを訪問してくださってコメントを残していただきありがとうございます。
      楽しい夜の時間をお過ごしください:)

      応答
  4. ありがとうございます。 ヘメトたoverflow-x:hidden; コード入れたらすぐに解決ですね^^

    応答