この記事内には広告が含まれています。
広告

Google Chrome の拡張機能「mobile browser emulator」を使って、モバイル機器での表示の状態を確認

Google Chrome の拡張機能に、モバイル機器での表示の状態を確認することが出来る「mobile browser emulator」があもことを知り、便利に使用しています。

私はスマートフォンを使いこなすことが出来ないため、みんなからは馬鹿にされながガラケーで音声通話だけ。

自慢ではありませんが、このサイトも今もってスマートフォンで閲覧したことがありません。

しかし、私のサイトは情報量が多いため、パソコンなどの大きな画面での閲覧を勧めていますが、Google Analytics ASPアクセス解析でサイトの閲覧状況を見た限りでは、約30%がスマートフォンでの閲覧のようです。

スマートフォンのサイズでの表示については、Google Chrome デベロッパーツールを使えは見ることは可能ですが、今一つピンとこない点がありますので、あちらこちらを探してみました。

広告

Google Chrome の拡張機能「mobile browser emulator」

Google Chrome の拡張機能「mobile browser emulator」は、この記事を編集しているパソコンの Chrome にもインストールしてあり、編集が終わり、投稿した後に確認用として使用しています。

上の図をご覧頂くとお判りになると思いますが、表示するサイズは、
320 x 480
320 x 533
320 x 568
360 x 640
375 x 667
の5つのサイズで、各サイズを個別に表示することが出来るし、反転表示の「Phones」をダブルクリックすると、5つのサイズを一挙に表示することも可能です。

反転表示の「Tablets」があり、画面のサイズを選択するなどの操作を行なえば、違ったサイズでの表示が出来ます。

Google Chrome の拡張機能「mobile browser emulator」での表示の例

このサイトの一つのページを表示してみました。

320 x 568 – iPhone 5

375 x 667 – iPhone 6