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

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

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

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

body {
    overflow-x: hidden;
}

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

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

body {
    overflow-x: hidden!important;
}

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

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