Blog

ブログ

Chromeに​User-Agent-Switcherが​いつの間にかあったので​使ってみたよ

  • レスポンシブWebデザイン
  • 記事公開日:
ChromeにUser-Agent-Switcherがいつの間にかあったので使ってみたよ

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

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

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

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

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

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

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

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

このページを共有

関連記事

この記事を読んだ人はこの記事も読んでいます

  1. レスポンシブ・タイプセッティング対応、スクロール時に指定位置で要素を固定させるjQuery/Zeptoのコードを書いてみた
    レスポンシブ・タイプセッティング対応、スクロール時に指定位置で要素を固定させるjQuery/Zeptoのコードを書いてみた
  2. Bing Mapをレスポンシブ化対応するには
    Bing Mapをレスポンシブ化対応するには
  3. レスポンシブWebデザインは、なぜ「戸惑う」・「難しい」と思う人が多いのか
    レスポンシブWebデザインは、なぜ「戸惑う」・「難しい」と思う人が多いのか
ページの上部に戻る