一歩ずつ学ぶ

最終更新日:

超便利!ChromeのUserAgentを変更してスマホ用サイトを見る

作成したWebサイトやブログがスマートフォンでどう表示されているかを パソコンから確認したい時があります。 そんな時にわざわざスマホシミュレーター等をインストールしなくても Chromeで簡単に確認できます。拡張機能をインストールする必要もありません。

(追記情報)
ChromeのUserAgentを変更する動画を作成しました。下にあります。

目次

設定方法

★ chromeの右上にある「設定」 - > 「ツール」 -> 「ディベロッパーツール」を選択 (F12キーでもディベロッパーツールが表示されます)

ディベロッパーツール

★ 画面右端に表示される記号「>三」をクリック。(show drawer.と表示される記号です)

show drawer

★ 今度は画面左側に表示されている「emulation」をクリック

emulation

★ 「Device」でいろいろな機種から選択できます。確認したい機種を選択してください。 図では[「Apple iPhone5」を選択しています。機種を選択したあとは 「Emulate」ボタンをおしてください。

Device

★ これで画面が小さくなって表示されます。 通常はF5キーか再読み込みボタンを押すとスマホ用として読み込まれます。

画面は小さくなっているけれど、うまく表示されない場合

うまく表示されない場合は、ブラウザ上部にある再読み込みボタンを押すか、 URL入力欄に直接URLを入力してEnterキーを押すとちゃんと表示されます。

動画(ChromeのUserAgentを変更する)

動画内容

Chromeに付属している「ディベロッパーツール」を使って UserAgentを変更します。

ユーザーエージェントを変更することで、 モバイルでどう表示されるかが簡単に確認できます。

↑ PAGE TOP