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 つ目のモバイル表示を追加するか、現在の表示を保存します
よくある質問