スマホの表示をパソコンで確認する(Chrome – デベロッパーツール)

スマホ表示確認ツールその2。
Google Chromeに標準搭載されているデベロッパーツールの機能で確認する方法。

Chromeでの確認方法

Chromeでは以下の手順でスマホ表示を確認できる。

  1. 左上の設定メニューから「その他ツール」→「デベロッパーツール」を選択する
    Chrome デベロッパーツールの起動

  2. デベロッパーツールウィンドウから「Toggle device toolbar」ボタンをクリックする
    Chrome デベロッパーツール Toggle device toolbar

  3. 画面上部のプルダウンメニューから確認したいデバイスに変更する
    Chrome Toggle device toolbar デバイスの変更

  4. デバイス変更後、ページを再読み込みすると、選択したデバイスでの表示に切り替わる
    Chrome での再読み込み

また、「Rotate」ボタンをクリックすると、縦/横表示を切り替えることができる。
Chrome スマホ表示 縦/横切り替え

デバイスの追加

デバイスの選択一覧から、「Edit…」を選択すると、デバイスを追加することができる。
Chrome Toggle device toolbar デバイスの追加

デフォルトで入っているデバイスのほか、カスタムデバイスとして自由にデバイスを追加することができる。
Chrome Emulated Devices Window

Firefoxでの確認方法

Firefox での確認方法は、以下の記事を参考に。
スマホの表示をパソコンで確認する(Firefox – User Agent Switcher)

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です