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

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にそのコードを追加するには?
    私のような初心者がその方法を学ぶことができる記事がありますか?

    1. ヘッダーにコードを追加する方法はさまざまです。

      チャイルドテーマを使う:
      1.チャイルドテーマがない場合はチャイルドテーマを作成します(参照).
      2. FTPを介してアクセスし、テーマフォルダからheader.phpファイルをPCにダウンロードした後、テキストエディタを開く...サイトにタグを追加します。
      3. FTPを介してheader.phpファイルをチャイルドテーマフォルダにアップロードします。

      プラグインを使用することも可能です。

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%97%A4%EB%8D%94%EC%99%80-%ED%91%B8%ED%84%B0%EC%97%90-%EC%89%BD%EA%B2%8C-%EC%BD%94%EB%93%9C-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0/

      参考までに Naver カフェでコーチングプログラムを運営しています。 WordPressとWebホスティング、CSSなどに関するさまざまな質問をすることができます。

      https://cafe.naver.com/wphomepage/20094

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

    1. 自動広告を表示していますか? 自動広告を表示する場合 WordPress テーマで広告が奇妙に表示されることがあります。 (この問題は WordPressだけでなく、ティーストーリースキンなどでも同様に発生する可能性があります。)

      まずは 有料テーマ場合は、テーマの販売者に連絡して問題を解決してみてください。
      テーマ開発者が問題を解決できない場合は、自動広告機能を無効にして手動で広告を配置することを検討してください。

      Ad Inserterなどのプラグインを使用すると、便利な広告を追加できます。 Ad Inserterプラグインを使用すると、広告の配置場所を正確に指定することができます。

      https://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-css-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A0%84%ED%9B%84%EC%97%90-%EA%B4%91%EA%B3%A0-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0/

      モバイル広告とPC広告を分離して広告サイズを指定できます。

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

    1. んでこんにちは、さん?
      ブログを訪問してくださってコメントを残していただきありがとうございます。
      즐거운 저녁시간 보내시기 바랍니다 :)

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

コメントを残す

*メールアドレスは公開されません。