パソコンでスマホ画面の見た目を確認する方法

今回は、一つのPCでiPhoneやiPad、Androidなどの端末の実際の見た目を確認する方法を紹介します。
この方法を使えば、一々それぞれのスマホで表示を確認する必要が基本的に無くなります実機確認作業が非常に楽になります。

Safari

Safariでは以下の端末をチェックできます。

• iPhone8
• iPhone8Plus
• iPhoneSE
• iPod touch
• iPad mini
• iPad Pro
• iPad
• Microsoft Edge
• Google Chrome（Mac版）
• Google Chrome（Windows版）
• Firefox（Mac版）
• Firefox（Windows版）

Safariでいろんなスマホ端末の表示を確認するには開発者ツールの「レスポンシブ・デザイン・モード」からを使います。

要素の詳細を確認では、iPhone8、iPhone8Plus、iPhoneSE、iPad mini、iPad Proの表示を確認出来ます。

レスポンシブ・デザイン・モードを確認は、上部メニューの「開発」→レスポンシブ・デザイン・モードで確認出来ます。
もしくはCommand＋Control＋Rのショートカットですぐに開きます。

この方法だと実際に画面幅もスマホサイズに変更され実機での表示とほぼ同じ様に表示されます。

別のPC端末の表示を確認

SafariではSafari以外のブラウザアプリでの表示も確認出来る様になっています。
この場合は、開発ツールの「ユーザーエージェント」を使用します。

ユーザーエージェントの設定を変更する事でiPod touch、iPad mini、iPad、Microsoft Edge、Google Chrome（Mac版）、Google Chrome（Windows版）、Firefox（Mac版）、Firefox（Windows版）での確認が出来ます。

ユーザーエージェントの設定は、Safariの上部のタブバーの開発→ユーザーエージェントから可能です。

ここでユーザー（ブラウザ）を選択するだけ各々の表示を確認できます。

ただし画面幅は現在使用してるモニターの幅に合わせて表示されます。そのため大した差は基本的に出ません。HTMLのタグでOSやブラウザによって記述を変えなくてはいけないものなどの確認に使います。（flexboxなど)

Chrome

Chromeにも全く同じ機能があります。
Chromeでは以下の端末をチェックすることができます。

• MotoG4
• GalaxyS5
• Pxel2
• Pxel2 XL
• iPhone5/SE
• iPhone6/7/8
• iPhone6/7/8 Plus
• iPhone X
• iPad
• iPad Pro
• Surface Duo
• Galaxy Fold

Chromeでいろいろな端末の表示を確認するには検証（右クリック→検証）を使用します。
検証画面の左上にあるスマホアイコンをクリックするとレスポンシブモードになります。（以下写真）

以上が「パソコンでスマホ画面の見た目を確認する方法」でした。

動作確認はWEB制作の全体の1/3を占める大事な作業かと思います。今回はそれを効率化できる方法になってます。
実機でも確認する事は非常に大事ですが、今回の方法も試してみるのもアリかと思います。