パソコンのChromeで拡張機能なしでUser Agentを変更してスマホ表示を確認する方法

こんにちは。グアバです。

皆さんはブログのデザイン変更をしたとき、スマホ表示をどのように確認されていますか？

ベストなのはもちろん実機で確認することなのですが、手元にスマホがなかったり、いちいちスマホで確認するのがめんどくさかったりしますよね。

私はというと、実機で確認できない場合はChromeの拡張機能「User-Agent Switcher for Chrome」を使って確認していました。

Chrome ウェブストア – User-Agent Switcher for Chrome

でもこれが最近動かなくなってしまったんですよね。Chromeがバージョンアップしたのが原因なのかはよくわかっていないのですが。

そこで代替手段を探していたら、なんてことはない、特別な設定や拡張機能のインストールなどしなくてもChromeの標準機能でUser Agentを変更できることがわかりました。

知っておくと便利な小技だと思いますのでご紹介します。

photo credit: stshank via photopin cc

Chromeの標準機能でUser Agentを変更する方法

それではさっそくやり方を見ていきましょう。

まず、Chromeのデベロッパーツールを開きます。やり方はいろいろですが、

• F12を押下
• Webページ上で右クリック→要素を検証
• Chromeの右上の設定アイコンをクリック→「ツール」をクリック→「デベロッパーツール」をクリック

上記のいずれかの操作をすれば良いです。

▼するとこんなウィンドウが開きます。

右上の「>三」みたいなアイコンをクリック→「Emulation」をクリック。

すると「Device」にていろいろなスマホやタブレットなどが選択できます。iPhone、Nexus、Xperia、Galaxy、Kindleなどの主要機種はカバーされているのでそれほど困ることはないでしょう。

機種を選んだら「Emulate」をクリックします。

▼するとスマホのサイズに表示が変わります。

でもなんかちょっと変ですね。ただ単にディスプレイサイズがスマホ用になっただけのようです。これじゃあChromeブラウザの幅を狭めただけに見えます。

そこで、F5を押下するか、再読み込みボタンを押して画面をリロードします。

▼すると、User Agentの設定が効いてスマホ用表示に切り替わりました！

PC表示に戻したい場合は、先ほどの「Emulate」の横にある「Reset」ボタンをクリックすればOKです。

これでスマホ用の表示が確認できますね。

ちなみに、スマホ用表示の場合タッチ操作も再現できます。

▼「Sensors」→「Emulate touch screen」にチェックを入れます。

うまくキャプチャが取れなかったのですが、これでマウスカーソルが黒丸上のポインタに変更され、スマホのタップ操作が再現できます。

ただ、これを有効にするとどうもJavaScriptがうまく動かず、アコーディオンメニューやTOPへ移動するボタンが効かなくなりました。チェックを外せば戻りますけどね。

まとめ

• PCのChromeからスマホ表示を確認したいときはデベロッパーツールを使うと良い
• 様々な機種が選択できる

特別なアプリなどを使わなくてもChromeの標準機能だけでできるので、知っておくと便利なTipsではないでしょうか。

＜関連記事＞

HTMLやCSS修正の確認はChromeの標準機能「デベロッパーツール」を使うと便利！ | love guava!

私が使っているおすすめのChrome拡張機能14個を公開！ | love guava!

Chromeブラウザで複数のGoogleアカウントを使い分ける方法 | love guava!