2015/02/05 エンジニア

超簡単!Chromeでスマホサイトの表示チェックをする方法

超簡単!Chromeでスマホサイトの表示チェックをする方法 WEBサイトのスマホ対応をする際、わざわざ実機で確認しなくても、パソコンから簡単にスマホサイトをチェックできる方法があります。Google Chromeのデベロッパーツールを使ってスマホサイトのチェックをする方法を画像付きで解説します。

Google Chromeのデベロッパーツール

PC版のChromeには、User Agent(ユーザーエージェント)を切り替えてスマホサイトを確認できる機能が備わっています。
ブラウザはそれぞれ個別のユーザーエージェント文字列を持っており、ユーザーエージェントを変更することで他のブラウザやスマホサイトの表示に切り替えることができます。
Chromeの拡張機能を使ってユーザーエージェントを切り替えることもできますが、デベロッパーツールからすぐに切り替えられます。

方法は2つあります。
1つは「設定(右上の3本バー)」→」「その他の設定」→「デベロッパーツール」から開く方法です。



もうひとつはページ上で右クリックして「要素の検証」から開く、またはショートカットからデベロッパーツールを開き、「device mode」に切り替えます。
ちょっと分かりにくいですが、左から2番目のモバイルデバイスのアイコンをクリックすると「device mode」に切り替わります。
「device mode」でスマホサイト表示に切り替わらない時は、そのままの状態でリロードするとスマホサイト表示になります。

ショートカット

Windows:「Ctrl」+「Shift 」+「i」
Mac:「command」+「option」+「i」



iPhone、iPad、Google Nexus、Samsung Galaxy、Amazon Kindle Fireなど、デバイスを選択すると各デバイスでの表示に変わります。
デバイスを切り替えると「You might need to reload the page for proper user agent spoofing and viewport rendering.」というメッセージが出ます。
これは一旦リロードしてくださいというメッセージなので、デバイスを切り替えたらリロードをします。
リロードする、または「Never show」をクリックするとメッセージは消えます。

システムエンジニア/SEの求人案件 システムエンジニア/SEの求人案件

システムエンジニアやプログラマーの求人・案件情報です。
フリーエンジニアや転職者向けに常時3000件以上の仕事情報を公開しています。