スマホで崩れる原因は、だいたい次のどれかです。上から順に確認すると、ほとんどが見つかります。

1. viewportの指定が無い

これが無いと、スマホはパソコン用の幅でページを表示し、全体を縮小します。文字が極端に小さくなっている場合はまずここです。

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

2. 横スクロールが出る

画面の幅より広い要素が1つあると、ページ全体が横にずれます。原因になりやすいのは次のものです。

• 幅を px で固定した要素
• 画像に width の指定が無い、または固定幅になっている
• 表（table）… 中身は縮まないので、横スクロールできる入れ物に入れます
• コードや長いURL … 折り返しの指定が必要です
• 画面外に置いた装飾（ずらした図形やアニメーションの要素）

原因の要素を探すには、検証ツールで要素を順に選んで、画面の外まで伸びているものを見つけます。

3. 長い文字列がはみ出す

日本語はどこでも折り返せますが、長い英数字やURLは1語として扱われ、折り返されずにはみ出します。会社名や商品名に長い英字が入る箇所は、実際に長い値を入れて確認してください。

overflow-wrap: anywhere;

4. 画面の高さを100vhにしている

スマホではアドレスバーの分だけ表示領域が変わるため、100vh で組むと下が切れたり、スクロールで動いたりします。高さは中身に合わせるか、別の単位を使います。

5. 入力欄をタップすると画面が拡大する

iOSでは、文字サイズが16px未満の入力欄をタップすると自動で拡大します。拡大を止める指定を入れるのではなく、入力欄の文字サイズを16px以上にしてください。

6. 固定の要素が邪魔をする

固定ヘッダーや下部のボタンは、スマホでは画面の多くを占めます。フォームを入力するときに入力欄が隠れていないか、実機で確認してください。

検証ツールだけで済ませない

ブラウザのスマホ表示は幅を変えているだけで、実機とは違います。アドレスバーの動き、フォントの自動拡大、スクロールの挙動は再現されません。公開前に必ず実機で見てください。

当社では、実機で確認したうえで納品しています。いま崩れている箇所の修正だけをお受けすることもできます。