やり方

Qaramellブログを例にとって、確認してみましょう。

まず、表示を確認したい画面を用意し、デベロッパーツールを起動します(右クリック→「要素の確認」から出せます)。

pic20140514-1

次に以下の画像の通りにクリックし、エミュレータの選択画面を表示します。

pic20140514-2

Deviceが選べるので、とりあえず「Apple iPhone 5」での表示を確認してみましょう。リストからiPhone5を選択して、Emulateを押すだけです。

pic20140514-3

なにやら画面幅が小さくなりましたが、表示はおかしいままです。

pic20140514-4

ここでブラウザの再更新をかけます。リロードボタンを押すか、Cmd+rで更新しましょう。すると、iPhone5の実機上での表示が確認できます。便利!

pic20140514-5

まとめ

デバイスはNexus7やXperiaなど、主要なものがいくつか揃っています。

また、パッと見たところ、User Agentの設定を行えばIE7やIE8での表示なども確認できそうです。お手軽なのでどんどん活用していきましょう!

CATEGORIES