ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2021年6月16日| 5のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기
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;
}

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

参照



5のコメント

コメント

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

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

    応答