ブラウザでスマホ表示をチェックする

Webサイトの制作や更新・修正などを行なっていると、各ブラウザによって見え方に違いが出てくるものです。
特にIEにおいては・・・。(´；ω；｀)

そんな中で、スマートフォンサイトもさることながら、パソコンからのスマートフォンやタブレット端末からの見栄えをチェックしていくことも多くなってきています。

その都度、各端末でチェック出来ればいいのですが、正直、手間であるのと同時に、全ての端末を手元には揃えてないのが現実です。
そうなると必然的に効率よくパソコンからの確認、できれば同一ブラウザにて・・・Google Chromeでの確認がしたくなります。

そこでユーザーエージェント（UA）の変更の出番です。
現状のWeb閲覧環境を擬似的に変更させることです。
あくまでも擬似的ではありますが、各環境下での見栄えをチェックすることが容易になります。

そんな中、こちらのサイトが参考になりました。
↓↓↓ ↓↓↓

参考GoogleChrome の UA(ユーザーエージェント) を変更する２つの方法。 | あなたのスイッチを押すブログ

 

まず、「デフォルト機能の使用」です。
画面上での右クリック > メニュー一番下の”要素の検証” をクリック。
次に、出てきた画面右下の歯車マークをクリックし、左側に出てきたメニューの”Overrides”を選択。
その中に「User Agent」項目があり、チェックをオンにすることで、ユーザーエージェントが変更可能となります。
変更できるユーザーエージェントはざっと20数個でしょうか。

次にエクステンション「User-Agent Switcherの利用」です。
こちらは手軽に機能拡張をインストールし、ワンクリックでユーザーエージェントの切り替えを行えます。
こちらの方がより多くのブラウザバージョンに変更でき、オススメです。

 

↓↓デザインモードには最適です！！(ﾟ∀ﾟ)

parliament – give up the funk

 

Editor’s Note

手元にはAndroidとiPhone端末があるんですが、タブレットも1つはあったほうがいいかと導入を検討中です。
主にWi-Fi環境下での使用だから、安価に手に入れられるのと、ランニングコストが0円なので、特に迷うこともないのですが・・・。
日常的にお子たちのオモチャにされるのだと想定されるので、タイミングを計測中です、ハイ。