2 つのモバイル表示を比較
iPhone と Android のプレビューを並べて開き、同じサイトを 2 つの画面サイズで確認できます。
DevTools なしで Chrome のモバイル表示
Mobile View Extension — サイトをモバイル表示で確認
いま開いているページのモバイル版をそのまま表示します。この Chrome 拡張機能はタブをスマートフォンとして再読み込みし、2 つの画面サイズを比較し、localhost にも対応し、スクリーンショットも保存できます。
Chrome に追加無料 · アカウント不要
閲覧履歴は収集しません
localhost でも動作
localhost:3000/dashboard
iPhone 17 Pro
Oppo A6xRuns over the page you already have openNo tab switching
レスポンシブ確認をもっと手軽に
毎日のチェックのためのモバイル表示スイッチャー。
ウィンドウ幅をドラッグしたり、ビューポートの数値を入力したり、タブを行き来したりせずにモバイル表示を開けます。操作パネルは確認中のページのすぐ横にあります。
ワンクリックで切り替え
フローティングバーで端末を選ぶと、ページがモバイル表示で再読み込みされます。デスクトップへの復帰も同じ操作です。
閲覧内容はあなたのもの
アカウントは不要です。個人データや閲覧履歴を収集することはありません。
公開前に localhost で確認
ローカルページをチェックしてから、同じ端末設定で公開後のサイトも確認できます。
よく使う端末を選択
ビューポートの数値を入力する代わりに、端末名からスマートフォンやタブレットを選べます。
見たままを保存
共有や確認が必要なときは、選択中のモバイル表示をバーからそのまま保存できます。
1 つのサイト · 2 つの画面
2 つの画面で同時にレスポンシブを確認。
幅の狭いスマートフォンと大きめの端末を並べ、同じページの両方の表示を見比べられます。見出しの折り返し、詰まったナビゲーション、抜け落ちた要素に気づきやすくなります。
- 端末名付きのスマートフォン・タブレットプリセット
- 同じ URL のライブ表示が 2 つ
- ページを離れずに端末を切り替え
公開の前後で
localhost と公開サイトを同じ手順でレスポンシブ確認。
開発中のページを確認し、そのあと同じ端末設定で公開 URL を開けます。開発からリリースまで確認手順が変わりません。
localhost 対応
一時的なビルドを公開しなくても、ローカルページのモバイル表示を確認できます。
すばやくスクリーンショット
選んだ端末の表示を保存して、レビューや共有に使えます。
使い方
デスクトップ表示から Chrome のモバイル表示へ
01
Chrome に拡張機能をインストールし、任意のサイトを開きます
02
スマートフォンのアイコンを押して端末を選ぶと、ページがモバイル表示で再読み込みされます
03
2 つ目のモバイル表示を追加するか、現在の表示を保存します
ガイド
Chrome でモバイル表示を確認する方法
PCでスマホ表示を確認する方法：Webサイトのモバイル版を見る4つの手段
PCでどんなWebサイトでもモバイル版を開く4つの方法と、それぞれで実際に何が見えるのか、手早く確認するならどれを使うべきかを解説します。
記事を読む →Chromeでスマホ表示を確認する方法：DevToolsデバイスモードの使い方
Chrome内蔵のモバイルエミュレータの使い方を手順で解説。デバイスモードの開き方、機種の選択・追加、通信とCPUの制限、タッチのエミュレート、スクリーンショットまで。
記事を読む →localhostのサイトをスマホで確認する方法（実機とスマホ表示）
ローカル開発中のサイトを実機のスマホやPCのスマホ表示で開く方法。LANのIPと--host、Chromeのポート転送、トンネル、エミュレーターでのアドレス、よくあるトラブルの対処法。
記事を読む →iPhoneの画面サイズ・解像度・ビューポート一覧【全機種】
iPhone SEからiPhone 18 Pro Maxまで全機種の画面サイズ（インチ）、解像度（px）、CSSビューポート、ピクセル比を一覧表にまとめ、Web制作での使い方も解説します。
記事を読む →PCでWebページのスマホ表示をスクリーンショットする方法（全体・枠付きも）
PCのChromeで、どんなWebページでもスマホサイズのスクリーンショットを撮る方法。表示範囲だけかページ全体か、端末の枠を付けるかどうかも選べます。
記事を読む →レスポンシブデザインの確認方法：実際の不具合を見つけるチェック手順
Webサイトのレスポンシブ対応を確認する手順。幅のスイープ、端末プロファイルでの確認、コンテンツの負荷テスト、拡大表示、スクリーンショットの自動化まで。
記事を読む →よくある質問
インストールの前に
Chrome でサイトをモバイル表示にするには？
Mobile View Extension をインストールし、サイトを開いてフローティングバーのスマートフォンボタンを押します。端末を選ぶと、ウィンドウサイズを変えずにページがスマートフォンの画面幅で再読み込みされます。
モバイル表示に切り替えるとページは再読み込みされますか？
はい。拡張機能はモバイルのユーザーエージェントとビューポートでタブを再読み込みします。そのため、幅を狭めたデスクトップ表示ではなく、実際のモバイル版が表示されます。
2 つのモバイルサイズを同時に確認できますか？
はい。同じページを 2 台の端末表示で並べられるため、レスポンシブの比較がすばやく行えます。
localhost でも確認できますか？
はい。ローカル開発ページに対応しているので、公開前にモバイル表示を確認できます。