ブラウザでスマホの表示確認ができるChrome拡張機能「Responsive Site View」

Chrome拡張機能「Responsive Site View」を使用すると、Google Chomeブラウザでスマホの表示確認が簡単にできます。

Chrome ウェブストア：Responsive Site View

Responsive Site Viewの使い方と操作性

Chromeブラウザに拡張機能を追加すると下のアイコンがアドレスバーの横に追加されます。

スマホ表示したいページ上で、「Responsive Site View」のアイコンをクリックすると、下の画像にあるようにURLが自動で入力され、「Let’s see it」ボタンを押すと別ウインドウが開きモバイル用の表示が現れます。

※モバイル用の表示をするには、事前にChrome拡張機能などを利用してユーザーエージェント設定をする必要があります。

また、「View as:」をクリックしてチェックしたい端末を選んでから「Let’s see it」ボタンを押すことで、目的の端末を直接表示をさせることもできます。

別ウインドウが開いた後、ページ上に下の画像にある設定ができます。
「URL」に表示したいページのURLを入力して隣にある「更新」をクリックするとことで、表示ページを切り替えることができます。また隣にある「View as:」で端末を変更できます。

また、「Rotate」ボタンを押すと縦横の切り替えができ、「Capture」ボタンを押すと別ウインドウが開いてキャプチャー表示され、「Scrollbars:」にチェックがあるとスクロールバーが表示されます。

ページの下や上に移動するには、スクロールバーを利用するので、「Scrollbars:」にチェックが必要です。またスクロールバーがあるとマウスホイールで上下に移動することができます。