パソコンで完璧に見えても、スマホで開くと文字がはみ出していた——よくあることです。確認方法は3つあり、手軽さと正確さが逆の関係にあります。順番に使い分けましょう。
方法1：開発者ツールのデバイスモード（手軽）
いちばん早い方法です。ブラウザの開発者ツールを開き、デバイスツールバーに切り替えます。
| OS | 開発者ツールを開く | デバイスモードに切りかえる |
|---|---|---|
| Windows | F12 または Ctrl + Shift + I | Ctrl + Shift + M |
| Mac | ⌘ + Option + I | ⌘ + Shift + M |
画面上部で機種（iPhone・Pixelなど）を選ぶと、その画面幅で表示されます。幅を変えながらレイアウトの崩れを探す用途にはこれで十分です。
方法2：同じWi-Fiで実機から見る（おすすめ）
パソコンで動かしている開発サーバーに、スマホから直接アクセスします。作りかけのページをそのまま実機で見られるので、いちばん実用的です。
手順1：パソコンのローカルIPアドレスを調べる
ipconfig getifaddr en0 # Macipconfig # Windows（IPv4アドレスの行を見る）192.168.1.5のような番号が出ます。これがWi-Fiの中でのパソコンの住所です。
手順2：外から見られる状態でサーバーを起動する
VS CodeのLive Serverを使っているなら、そのままで見られます。開発サーバーによっては、外部からのアクセスを許可する指定が要ります。
npx astro dev --host # Astroの場合
npm run dev -- --host # Viteの場合起動時に表示されるNetwork:の行に、そのまま使えるアドレスが出ます。
手順3：スマホのブラウザで開く
http://192.168.1.5:5500 ← 調べた番号 + ポート番号スマホのアドレス欄に入力すれば、作りかけのページが実機で表示されます。保存すればスマホ側も更新されます。
方法3：公開してURLで見る（確実）
公開してしまえば、どの端末からでも本番と同じ条件で見られます。人に見てもらうときもURLを送るだけです。
Git・GitHubGitHub Pagesで公開するGitHubに置いたリポジトリをそのまま公開する方法べんりワザ作ったサイトをネットに公開する方法ドラッグ&ドロップで公開する方法（Netlifyなど）1実機でしか分からない差
デバイスモードで問題なくても、実機で崩れる代表的なものです。
hoverが効かない
指で操作する端末には「マウスを乗せた状態」がありません。hoverでしか出ない情報は、スマホでは永久に見られないことになります。大事な情報はhover任せにしないでください。
画面の高さ（100vh）がずれる
スマホのブラウザはアドレスバーが伸び縮みするため、height: 100vhにすると画面からはみ出すことがあります。100dvhを使うか、高さを固定しない作りにすると安全です。
入力欄をタップすると拡大される
iOSのSafariは、文字サイズが16px未満の入力欄をタップすると自動でズームします。
input,
textarea,
select {
font-size: 16px; /* 16px以上ならズームしない */
}タップしづらい
指で押す領域は、縦横44px以上が目安です（Appleのガイドラインの数字）。リンクやボタンが小さすぎると、隣を押してしまいます。
.btn {
min-height: 44px;
padding: 12px 20px;
}横スクロールが出る
はみ出した要素が1つあるだけで、ページ全体が横に動くようになります。原因の多くは画像の幅か固定幅の指定です。
img {
max-width: 100%;
height: auto;
}公開前のスマホチェックリスト
- 横スクロールが出ていない
- 文字が小さすぎない（本文16px前後）
- ボタンとリンクが指で押せる大きさ（44px以上）
- 入力欄をタップしても拡大されない
- hoverでしか見えない情報がない
- 画像が重すぎない（モバイル回線でも待たされない）
-
<meta name="viewport">が入っている
まとめ
- デバイスモードは手軽だが「幅の再現」だけ。iOS特有の挙動は分からない
- 同じWi-Fiで実機から開発サーバーを見るのがいちばん実用的（
--hostとローカルIP） - 実機でしか出ない差はhover・100vh・入力欄のズーム・タップ領域・横スクロール
スマホで見られる回数のほうが多い時代です。作っている途中から実機を横に置いておくと、直す量がぐっと減ります。