css

【CSS】スマホで見ると微妙に左右にズレる現象 → 1行で速攻解決します。

レスポンシブ対応のサイトを作っている場合、スマホサイズの画面にすると画面が左右に微妙にズレる場合があります。

ほとんどの場合の原因は、サイトの横幅がスマホ画面サイズを超えてしまったことが原因です。

解決するCSSコードは、ズバリ以下の通り。

body {
    overflow-x: hidden;
}

bodyクラスに、「overflow-x: hidden;」の1行追加するだけです。

すでにbodyタグにhidden以外のoverflow設定がされている場合は、
「!important」をつけてやります。

body {
    overflow-x: hidden!important;
}

これだけでスマホ表示した際、画面が微妙にグラグラズレることを解消することができます。

その方法としては、サイト内にhtmlコードやcssコードを記載する場合のタグは、
<code></code>ではなく、
<pre></pre>で囲むと解決する場合があります。

\ 注 目 /

CodeCamp
▲自宅で学べるプログラミング学習

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です