パソコンでスマホ表示を確認できるChrome拡張機能「Mobile/RWD Tester」

プログラミング

Chrome拡張機能「Mobile/RWD Tester」を使用するとスマホなどのモバイル端末でサイトがどのように表示されるのか確認することができます。ただ完璧に再現できているのか分かりませんので、表示の目安として気軽に使用するにはいいと思います。

Chrome ウェブストア:Mobile/RWD Tester

Mobile/RWD Testerの使い方と操作性

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

Mobile-RWDTester1

モバイル表示方法

「Website URL」欄に表示したいURLを入力して、その下にあるモバイル端末をクリックすると別ウインドウが立ち上がり選択したモバイル端末の表示になります。

また、モバイル表示したいサイトを開いて、「iphone5」や「Galaxy S 3/4」を直接クリックするだけで表示できます。

Mobile-RWDTester

操作・設定について

ブラウザでモバイル用(iPhoneなど)のユーザエージェント設定している場合、「Mobile/RWD Tester」で選択したモバイル端末表示になりますが、ユーザーエージェントを設定していない場合、PC用の表示で小さく表示されるだけになります。

モバイル用の表示にするには、ユーザエージェントを変更できるChrome拡張機能などを使い、事前にモバイル用のユーザーエージェントを設定しておくと「Mobile/RWD Tester」にあるモバイル端末をクリックするだけでモバイル用の表示がされます。

操作方法と使い勝手

表示されたページ内を移動するには、スクロールバーが表示される場合にはそれを使い、ウインドウの下に表示される上下(↑↓)の場合は、これをクリックすることでページ内を移動できます。

Mobile-RWDTester2

スポンサーリンク

コメント

タイトルとURLをコピーしました