Webサイトがスマホで違って見える理由は、たいてい次の3つのどれかです。レイアウトが狭い画面に合わせて変わっている（想定どおり）、スマホに別バージョンのページが配信されている（キャッシュ、端末判定、プラグイン）、スマホのブラウザや設定によって描画が変わっている（Safariのエンジン、ダークモード、文字サイズ）。対処法はまったく異なるので、まずどれに当たるのかを見極めましょう。
まずPCで再現する
PCで同じURLをスマホ表示で開きます。Chrome DevToolsのデバイスモードか、モバイルのユーザーエージェントとスマホの画面サイズでページを再読み込みする Mobile View Extension のようなスマホ表示の拡張機能を使います。
- スマホ表示でもおかしい場合： レイアウトやコンテンツの問題です。原因1〜4から確認しましょう。
- スマホ表示では正しいのに、実機ではおかしい場合： 配信やブラウザの問題です。原因5〜11から確認しましょう。
レイアウトとコンテンツの原因
1. viewport metaタグがない、または間違っている
<meta name="viewport" content="width=device-width, initial-scale=1"> がないと、スマホはページを幅約980pxのPC版として描画してから縮小するので、すべてが小さく見えます。固定の width=1024 のように値が間違っていると、ページの拡大縮小がおかしくなります。viewport metaタグの解説をご覧ください。
2. 画面より幅の広い要素がある
固定幅の要素（表、埋め込み、長いURL、max-width: 100% のない画像）が1つあるだけで、ページ全体が横にスクロールするようになり、それを収めるために縮小表示するブラウザもあります。DevToolsで、scrollWidth が表示領域より大きい要素を探して特定しましょう。
3. ブレイクポイントが想定外の幅でレイアウトを切り替えている
横向きのスマホは思ったより幅が広いかもしれませんし、タブレットが768pxのブレイクポイントのPC側に入っているかもしれません。iPhone画面サイズ一覧で端末の実際の幅を確認し、ブレイクポイントを見直しましょう。
4. モバイルでコンテンツが非表示・並べ替えられている
ページビルダーやCSSでは、狭い幅で display: none によってセクションを隠したり、カラムの順番を入れ替えたりすることがよくあります。意図したデザインですが、設定したことを忘れがちです。モバイル専用の表示設定を確認しましょう。
配信の原因：スマホに別のページが届いている
5. キャッシュが古いバージョンを返している
スマホのブラウザに古いCSSが残っているか、CDNやキャッシュプラグインがクリアされていないモバイル用のキャッシュを別に持っている可能性があります。サイトとCDNのキャッシュをクリアし、スマホのプライベートタブで再読み込みしましょう。
6. 端末判定で別のテンプレートが返されている
テーマ、プラグイン、サーバーの中には、ユーザーエージェントを見てスマホに別のHTMLを返すものがあります。PCのブラウザのウィンドウでは、たとえ幅を狭くしてもそのバージョンは見えません。本物のモバイル用ユーザーエージェントを送るスマホ表示なら見えます。ユーザーエージェントの仕組みはユーザーエージェント切り替えツールとはで解説しています。
7. 広告、A/Bテスト、パーソナライズ
広告枠、実験、位置情報に基づくコンテンツは、端末や訪問ごとに変わることがあります。ログアウトした状態で、プライベートタブを使い、可能なら実験を無効にしてテストしましょう。
ブラウザと設定の原因：スマホでの描画が違う
8. Safariのエンジンの挙動が違う
iPhoneのブラウザは、基本的にすべてWebKitを使っています。違いが出やすいのは、フォーム部品、overflowを持つコンテナ内の position: sticky、縮むアドレスバーと 100vh（100dvh を使いましょう）、新しいCSS機能などです。Xcode Simulatorか実機でiOS版Safariをテストしましょう。iPhoneでの確認方法をご覧ください。
9. ブラウザがダークモードを適用している
Samsung Internetなど一部のブラウザは、独自のカラースキームを宣言していないページに強制的に暗い配色を適用することがあります。背景が透明なロゴや固定の色指定は読めなくなります。color-scheme を宣言して prefers-color-scheme でダークテーマを用意するか、明るい色を明示的に指定しましょう。
10. フォントや文字サイズが違う
Webフォントの読み込みに失敗すると、スマホは文字幅の異なるシステムフォントで表示するので、折り返し位置が変わります。ユーザーがブラウザやOSのアクセシビリティ設定で文字を大きくしていることもありますし、モバイルブラウザが横向きで文字を自動的に拡大することもあります。相対単位を使い、テキストが折り返せるようにし、自動拡大が問題になるなら text-size-adjust: 100% を指定しましょう。
11. ブラウザの機能がページを変えている
コンテンツブロッカー、データセーバー、リーダー表示、翻訳機能は、訪問者に見える内容を変えることがあります。1人だけがおかしなレイアウトを報告しているなら、作り直す前に、どのブラウザでどの機能を使っているかを聞きましょう。
簡易診断表
| 症状 | 最も可能性の高い原因 |
|---|---|
| すべてが小さく、拡大しないと読めない | viewportタグがない（1） |
| ページが横にスクロールする | 画面より幅の広い要素（2） |
| プレビューでは正しいのに、スマホでは古いデザイン | キャッシュ（5） |
| スマホではまったく違うデザイン | 端末判定またはモバイル用テーマ（6） |
| iPhoneでだけ崩れる | Safari／WebKitの違い（8） |
| 色が反転する、ロゴが見えない | 強制ダークモード（9） |
| 折り返しが変わる、ボタンがはみ出す | 代替フォントまたは文字サイズの拡大（10） |
次回から防ぐには
新しいページは公開後ではなく、作りながらスマホ表示で確認し、リリース用の短いチェックリストを用意しておきましょう。モバイルサイトのテスト用チェックリストに例があります。WordPress特有の対処法はWordPressサイトをスマホ対応にする方法をご覧ください。
よくある質問
Chromeのスマホ表示と実機のスマホで見え方が違うのはなぜですか？
Chromeのスマホ表示は、Chromeのエンジンと、PCにキャッシュされたファイルを使っています。スマホではSafariのエンジンが使われていたり、別のファイルやCDNのモバイル用キャッシュが使われていたり、ダークモードや文字の拡大が適用されていたりします。
WordPressのサイトがスマホで違って見えるのはなぜですか？
よくある原因は、ページビルダーの設定がPCサイズにだけ適用されている、キャッシュプラグインが古いモバイル用キャッシュを返している、テーマやプラグインが別のモバイル用レイアウトを返している、の3つです。
スマホでサイトが縮小表示されるのはなぜですか？
たいていはviewport metaタグがないか、画面より幅の広い要素があり、ブラウザがそれを収めるために縮小しているからです。