ブログ

Chromeにもある!User-Agent-Switcher

いつもお世話になっている[謎].net Magezineの記事より。
33 fantastic Chrome extensions | Feature | .net magazine」という記事を読んで、「User-Agent-Switcher」という機能がChromeにもあることを知ったので調べてみました。

レスポンシブWebデザインに使える便利機能?

コンテキストメニュー(右クリックメニュー)の「要素の検証」をクリックするとDeveloper Toolsが開きます。その右下のギアマークをクリックすると黒いモーダル画面が現れます。
いままでこの設定を知りませんでした。

「General」「Overrides」「Shoutcuts」の3つのタブがあります。

Generalタブ
Generalタブ
Overridesタブ
Overridesタブ
Shoutcutsタブ
Shoutcutsタブ

「Overrides」タブに便利なものが詰まっています。

  • 「User Agent」を変更できます。
  • 「Device metrics」でスクリーンサイズ(Screen resolution)を変更することができます。
  • 「Emulate touch event」でタッチイベントをエミュレートすることができます。

「Device metrics」でのUser Agentには、IEなどおなじみのブラウザに加えてBlackberryなどのブラウザもエミュレートできます。

User Agentとスクリーンサイズが変更可能
User Agentとスクリーンサイズが変更可能
iPadサイズで表示した例
iPadサイズで表示した例

画面キャプチャはMac版の画面ですが、Windows版のChromeにも、もちろん同じ画面がついています。

現在、iOSやAndroidなど、Webkitが使われるモバイルブラウザが主流になっています。同じWebkitを使うChromeにこのような便利な機能がついているのはありがたいと思います。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。