BLOGブログ

パソコンでスマホサイトの表示確認する方法

スマホサイトの表示確認どうしてますか?ブラウザのエミュレーターを使えば、パソコンから簡単に表示確認することができます。プラグインは不要です。

IEの旧バージョンの表示確認は「開発者ツール」が便利」でも紹介しましたが、最近のブラウザは「開発ツール(デベロッパーツール)」を搭載していて、その中には画面サイズやユーザーエージェントを切り替えるエミュレーション機能が搭載されています。

Chromeでスマホサイトの表示確認する方法

Chromeのデベロッパーモード

Chromeの「デベロッパーツール」は「表示」メニューの「開発/管理」から呼び出します。

端末の画面サイズに切り替える

端末の画面サイズに切り替える

いろいろな機能がありますが、「Device」メニューからエミュレートしたい端末を選んで「Emulate」ボタンを押すと画面サイズが指定した端末のサイズに切り替わります。メディアクエリーでレイアウトを変えているサイトはこれで表示確認できます。

ユーザーエージェントを切り替える

ユーザーエージェントを切り替える

「User Agent」メニューからエミュレートしたユーザーエージェントを選んでリロードすると表示が切り替わります。PCサイトとスマホサイトをユーザーエージェントで切り替えているサイトはこれで表示確認できます。

Safariでスマホサイトの表示確認する方法

Safariの開発ツールの設定

Safariの「開発ツール」は最初はメニューにありませんが、「環境設定」の「詳細」の最下部にチェックを入れるとメニューに「開発」項目が追加されます。

Safariのユーザーエージェントの切り替え

「開発」の「ユーザーエージェント」でユーザーエージェントの切り替えができます。その他のユーザーエージェントは「その他」から追加します。