【PC版Chrome】Webサイトをスマホ表示する方法

この記事では、Chromeを使って、パソコンからサイトのスマホ表示を確認する方法について解説します。

パソコンでサイトをスマホ表示

Chromeブラウザの場合、特別な拡張機能(アドオン)などは一切使わずにパソコンからスマホ表示サイトを確認できます。
Web制作者や、WordPressなどでスマホ向けブログを作っている人には重宝する機能です。

Chromeには、「Developer Tools」という開発者向けの機能が標準で備わっており、それを利用することでパソコンからでもスマホページを閲覧できます。

操作手順

操作手順は以下の通りです。

①「F12キー」を押します。

②「Developer Tools」の画面が開きます。画面右上にある「Toggle Device Toolbar」ボタンをクリックします。

③すると、スマホ表示に切り替わります。もう一度「Toggle Device Toolbar」ボタンをクリックをパソコン表示に戻ります。

④画面左上にある「Responsive」をクリックすると、主要なスマートフォンの機種がリスト表示されます。
選択した機種に合わせてスマホ表示も変化します。
機種ごとの画面サイズに合わせた表示となるため、より精度が高くなります。

この記事を書いた人
西住技研

WordPress使用歴は10年以上。仕事や趣味でこれまでに数多くのWordPressサイトを構築・運営し、初心者から上級者まで幅広いユーザーに向けた情報を発信しています。
詳しいプロフィールやお問合せはこちらのページまで。
YoutubeX(旧Twitter)でも情報発信中です!

西住技研をフォローする
WordPress開発

コメント