スマホだけ表示が崩れる本当の理由

PCでは正常、スマホだけ崩れるのは「画面サイズ」の問題ではない

Webサイトを公開したあと、よく起きるトラブルがあります。
PCではきれいに表示されているのに、スマホで開くとレイアウトが壊れている現象です。

多くの場合、「スマホの画面が小さいから」と考えられます。
しかし実際には、単なるサイズ違いではありません。

スマホブラウザはPCブラウザと似ているようで、動き方が大きく異なります。
表示崩れはデザインの問題ではなく、仕組みの違いから起きています。

スマホは「PCの小型版」ではない

ここが最も重要な点です。
スマートフォンのブラウザはPCブラウザの縮小版ではありません。

特に違うのは次の3つです。

• 画面幅の扱い
• フォント計算
• タッチ操作

この違いにより、同じCSSでも違う結果になります。

viewport設定がないと何が起きるか

スマホ表示崩れの代表例がviewport設定です。
これがない場合、スマホはページをPC用として表示します。

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

この1行がないと、スマホは横幅を約980pxとして扱います。
そしてページ全体を縮小表示します。

その結果、

• 文字が極端に小さい
• レイアウトが折り返さない
• 横スクロールが出る

といった問題が起きます。

レイアウト崩れの本当の原因は「幅の計算」

CSSでは幅の指定方法が重要です。

例えば次の指定です。

.container {
  width: 1200px;
}

PCでは問題ありません。
しかしスマホの画面幅は約360pxです。
結果として画面からはみ出します。

レスポンシブデザインが必要な理由はここにあります。
画面サイズではなく、固定幅が原因です。

画像がはみ出す理由

画像の崩れも頻発します。
原因はサイズ指定です。

img {
  width: 800px;
}

この指定はPC前提です。
スマホでは画面より大きいためレイアウトが押し広げられます。

正しくは次のようにします。

img {
  max-width: 100%;
  height: auto;
}

これにより画面幅に合わせて縮小されます。

スマホ特有の問題：タッチ操作

スマホではクリックではなくタップです。
そのため、次の問題が起きます。

• hoverが効かない
• メニューが開かない
• ボタンが反応しない

PCではマウスを乗せると動くメニューがありますが、スマホには「乗せる」という概念がありません。
JavaScriptのイベントが発生せず、操作不能になります。

フォントと行間が崩れる理由

スマホはフォント描画が異なります。
同じ16pxでも実際の表示サイズが変わることがあります。

また、日本語フォントは端末ごとに違います。
その結果、次の現象が起きます。

• 文字が2行になる
• ボタンから文字がはみ出る
• レイアウトが押し出される

これはCSSミスではなく、文字幅の差です。

実際に起きやすい落とし穴

よくあるのが「PCのブラウザ幅を縮めて確認したから大丈夫」という判断です。
これは完全な再現ではありません。

PCブラウザはPCのレンダリングエンジンです。
スマホは別の処理を行います。

つまり、PCでの縮小表示はスマホ表示ではないということです。

キャッシュの影響もある

スマホはキャッシュを強く保持します。
CSSが更新されても古いスタイルを使う場合があります。

そのため、修正しても直らないことがあります。
再読み込みやキャッシュ削除で解消するケースも多いです。

注意点：テーマの問題とは限らない

表示崩れが起きるとテーマ不良を疑いがちです。
しかし多くの場合、テーマではなく以下です。

• 追加したCSS
• 埋め込み広告
• 外部ウィジェット

特に広告はiframeで幅を固定することがあり、スマホ表示を壊します。

結局なぜ崩れるのか

スマホ表示崩れの原因は1つではありません。
共通しているのは「PC前提の設計」です。

Webは一つの画面サイズを想定して作ると破綻します。
現在は様々な幅と操作方法が存在します。

スマホだけ崩れるのは、スマホが特殊なのではありません。
PCだけが特別に都合よく表示されているだけです。

スマホ対応とは調整作業ではなく、環境の違いを前提に設計することです。
それを理解すると、表示崩れは減り、原因も追えるようになります。