Google Chromeがとても便利だと思う、あきら(@akrwnet)です（＾ｖ＾）
Web制作をしていると、いろんなサイトを観覧する機会がありますが、最近ではレスポンシブ・ウェブデザインのものが増えてきたので、スマートフォンや、iPhoneなどでどのように表示されるのか気になるものです。
その動作を確認するために、いちいちブラウザを縮めて表示させるのも意外と面倒な作業ではないでしょうか。
しかしGoogle Chromeでは、そんなことをせずにボタンひとつで簡単に表示させることができます。
レスポンシブ・ウェブデザインであればこのようにボタンひとつで、そうでない場合にはボタン2つで表示変換できるので、その方法を紹介してみたいと思います。
デベロッパーツールの設定
Google Chromeでは、F12でWeb制作者のためのデベロッパーツールを開くことができます。（ちなみに、MacではControl + Option + I ）
F12で開くことも閉じることもできますし、もしくは右クリックで要素を検証(N)でも同様のことができます。
そして、右下にあるセッティングをクリック
User agent→Override device metricsにチェック→Screen resolution:にサイズ入力
ここでは、iPhone4サイズの320×480にしてみました。
レスポンシブ・ウェブデザインのサイトであれば、この設定だけでどのように表示されるのか調べることができます。
調べたい時、その都度F12を押すだけと、とっても簡単なので時間短縮になるかと思いますよ♪
※レスポンシブ・ウェブデザインの場合でも、F5などで再読み込みをしないと正しく表示されないかも
User-Agent Switcher for Chromeを追加
レスポンシブ・ウェブデザインに対応していなく、ユーザーエージェントで表示方法を振り分けているサイトでは、デベロッパーツールの設定をしてもPCのままの認識なのでうまく表示されないと思います。
試しにヤフージャパンを表示してみましたが、案の定デザインが崩れていますね。
そこで、User-Agent Switcherという便利な拡張機能があるので追加
追加すると、右上のツールバーにメガネマーク？が表示されるので、そこでユーザーエージェント変更することができるようになります。
今回はiPhoneにしてみます。（iOSをクリックすると、iPhoneとiPadが選択可能）
すると、しっかりスマートフォンに対応させたデザインが表示されるようになっているのが分かるかと思います。
逆に、ユーザーエージェントだけiPhoneに切り替えて、デベロッパーツールを開かないと、幅が100%で間延びをしたように表示されてしまいます。
ユーザーエージェントは、Chrome→defaultで戻すことができるので、確認が終了したら戻しておくのが良いでしょう。
まとめ
設定さえしてしまえば、F12（デベロッパーツール）とUser-Agent Switcherという組み合わせで、スマートフォンでどのように表示されているのか、デザインの確認をすることができます。
この2つを利用することにより、いちいちブラウザの幅を変えて確認したり、実機で確認したりする必要がなくなるので、有効活用してみてください♪
ではまた(＾‐＾)ゝ
コメント