パソコンでスマホ表示を確認したい時、Google Chromeを使うと便利です。

 

スマホサイトを確認したい時、PCサイトを開いて「mp」とか、
スマホURLを入れなくても、Chromeなら簡単に確認できますよ！

 

フロンティア技研の三浦チーフからネタの提供をいただきましたので、
今回はそのGoogle Chromeの便利機能をはりきってお伝えしたいと思います。

 

 

■Chromeのデバイスモード

 

PCでスマホサイトを確認する時、スマホURLを打って画面を出したり、
スマホの大きさになるよう画面をキューっと縮めたりするのは少し面倒です。
Google Chromeの機能を使って、簡単にスマホ表示の確認をしましょう。

 

 

 

　Google Chromeを開いて、確認したいページを開きます。

 

 

ページを開いたら、キーボードの「F12」を押します。

 

 

デバイスモードに表示が変わりました。この状態から「F5」を押します。

 

 

スマホページが表示されました。「F12」を押すとデバイスモードは終了します。

 

 

レスポンシブサイトの場合「F12」だけで、「F5」を押さなくても確認できます。

 

 

画面を縮めたりしなくても、簡単にスマホ表示の状態が確認できます。

 

「F12」→「F5」で簡単にスマホ表示に切り替えられるのは便利ですね！
この機能を使うために、初回だけ必要な操作があるので確認してみましょう。

 

 

■初回に必要な操作の流れ

 

初めて「F12」から確認をする場合、デバイスモードの設定が必要です。
初回だけこちらの手順で進めてみてください。

 

Google Chromeを開いて、確認したいページを開きます。

 

ページを開いたら、キーボードの「F12」を押します。

 

 

ディベロッパーツールが起動しました。

 

 

画面左下の方からデバイスモードを起動します。

 

 

端末と画面サイズの選択欄が表示されました。

 

 

「Responsive▼」をクリックして、端末の選択をします。

 

 

端末を選んだ状態で「F5」を押します。スマホサイトが表示されました。

 

 

再度「F12」を押すと、デバイスモードは終了します。

 

一度、設定すれば、次から最初にお伝えした「F12」→「F5」で確認できます。

 

 

今回はChromeを使って、簡単にスマホ表示を確認する方法をご紹介しました。
フロンティア技研 三浦チーフ　ありがとうございました！