Panda Noir

JavaScript の限界を究めるブログです。

Google ChromeでiPhone版のデザインを確認する方法

私も最近知ったのですが、Google Chromeの意外な機能として、iPhone版ページの確認があります。

つまり、PCでiPhoneCSSの調整ができるということです。

実機でいちいちみる必要がなくなってとても重宝しています。

方法は、まず表示→デベロッパツールを開きます。

Ctrl(command)+Alt(option)+j or iでも開けます。

開いたら、歯車マークをクリックします。

gear.png

Overridesというのがあるので、クリックします。

User AgentをOnにしてiPhone iOS5(4でも可)、Device metrics の Screen resolutionに320×480といれます。

こうなればOKです。

develop.png

あとはページを一度更新すれば完了です。

これ、結構便利なので使ってみてはいかがでしょうか?