スマホで表示がおかしいときの確認手順

パソコンでは問題ないのに、スマホで見ると崩れている。よくある話ですが、原因はだいたい決まっています。順番に潰していきましょう。

1. まず viewport の1行を確認する

全体が極端に縮小されて、文字が読めないほど小さい。この症状なら、ほぼ確実にこの1行が抜けています。

index.html（head内）

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

この指定が無いと、スマホは「パソコン向けのページだろう」と判断し、幅980px程度で描画してから画面に縮小して収めます。結果、全体が小さくなります。まずここを見てください。

画面より広い要素がどこかに1つあります。犯人の候補は決まっています。

犯人を見つける手っ取り早い方法があります。検証ツールで次のCSSを一時的に足すと、すべての要素に枠線が出ます。画面からはみ出している箱が一目で分かります。

一時的に貼るCSS

* { outline: 1px solid red; }

URLや長い英単語は、途中で改行されずにそのまま伸びます。日本語は自動で折り返されるので気づきにくいところです。

CODE折り返しの指定あり・なしコードを書き換えると、すぐ下で動きます

上は枠からはみ出します。overflow-wrap: anywhere を消したり付けたりして比べてみてください。

スマホでの本文は16px相当を下回らないようにしてください。それより小さいと読みづらいだけでなく、入力欄では画面が勝手に拡大される挙動が起きることがあります。

指でタップする以上、リンクやボタンは小さすぎると押せません。おおよそ44px四方を目安に、余白を含めて確保します。文字だけのリンクが並んでいるときは、上下に padding を足すと押しやすくなります。

検証ツールのスマホ表示は便利ですが、完全に同じではありません。特に、固定ヘッダーとアドレスバーの重なり、フォントの見え方、タップの感触は実機でしか分かりません。同じネットワークにつなげば、スマホから開発中のページを開けます。仕上げの前に一度は見てください。