PCでスマホ表示チェックができる「User-Agent Switcher for Chrome」の便利な使い方

Google Chromeがとても便利だと思う、あきら(@akrwnet)です(^v^)

 

Web制作をしていると、いろんなサイトを観覧する機会がありますが、最近ではレスポンシブ・ウェブデザインのものが増えてきたので、スマートフォンや、iPhoneなどでどのように表示されるのか気になるものです。

その動作を確認するために、いちいちブラウザを縮めて表示させるのも意外と面倒な作業ではないでしょうか。

しかしGoogle Chromeでは、そんなことをせずにボタンひとつで簡単に表示させることができます。

2012-09-28_23h26_49

 

レスポンシブ・ウェブデザインであればこのようにボタンひとつで、そうでない場合にはボタン2つで表示変換できるので、その方法を紹介してみたいと思います。

 

スポンサーリンク

デベロッパーツールの設定

Google Chromeでは、F12でWeb制作者のためのデベロッパーツールを開くことができます。(ちなみに、MacではControl + Option + I )

F12で開くことも閉じることもできますし、もしくは右クリックで要素を検証(N)でも同様のことができます。

2012-09-28_23h36_28

 

そして、右下にあるセッティングをクリック

2012-09-28_23h39_06

 

User agent→Override device metricsにチェック→Screen resolution:にサイズ入力

2012-09-28_23h41_11

ここでは、iPhone4サイズの320×480にしてみました。

 

レスポンシブ・ウェブデザインのサイトであれば、この設定だけでどのように表示されるのか調べることができます。

調べたい時、その都度F12を押すだけと、とっても簡単なので時間短縮になるかと思いますよ♪

 

※レスポンシブ・ウェブデザインの場合でも、F5などで再読み込みをしないと正しく表示されないかも

 

User-Agent Switcher for Chromeを追加

レスポンシブ・ウェブデザインに対応していなく、ユーザーエージェントで表示方法を振り分けているサイトでは、デベロッパーツールの設定をしてもPCのままの認識なのでうまく表示されないと思います。

試しにヤフージャパンを表示してみましたが、案の定デザインが崩れていますね。

2012-09-29_00h03_03

 

そこで、User-Agent Switcherという便利な拡張機能があるので追加

追加すると、右上のツールバーにメガネマーク?が表示されるので、そこでユーザーエージェント変更することができるようになります。

2012-09-28_23h58_28

今回はiPhoneにしてみます。(iOSをクリックすると、iPhoneとiPadが選択可能)

 

すると、しっかりスマートフォンに対応させたデザインが表示されるようになっているのが分かるかと思います。

2012-09-29_00h11_53

 

逆に、ユーザーエージェントだけiPhoneに切り替えて、デベロッパーツールを開かないと、幅が100%で間延びをしたように表示されてしまいます。

2012-09-29_00h13_17

 

ユーザーエージェントは、Chrome→defaultで戻すことができるので、確認が終了したら戻しておくのが良いでしょう。

 

まとめ

設定さえしてしまえば、F12(デベロッパーツール)User-Agent Switcherという組み合わせで、スマートフォンでどのように表示されているのか、デザインの確認をすることができます。

この2つを利用することにより、いちいちブラウザの幅を変えて確認したり、実機で確認したりする必要がなくなるので、有効活用してみてください♪

 

ではまた(^‐^)ゝ

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする