こんにちは、さち です。
今回は、Google Chrome で
スマホでの表示を再現（エミュレート，エミュレーション）する方法について
書いていきます。
拡張機能（エクステンション）の導入は必要ないので
手順さえ覚えれば誰でもすぐに使えますよ！
Chrome でスマホの表示を再現する
- 例として、このブログのPC版サイトを開きました。
「Ctrl + Shift + I」キーを押します。
- 「スマホ」アイコンをクリック。
- 下に新たにツール（drawer）が表示されました。
「Emulation」タブが開いている状態のはずです。
- 「Model」をクリック。
- 再現する機種を選択します。
例では、「iPhone5」を選択肢ました。（機種一覧は後述）
- 機種を選択すると
画面サイズ（Resolution），デバイス・ピクセル比（Device pixel ratio） が設定されます。
（「デバイス・ピクセル比」って何？という人はこちらが分かりやすいです）
- ページを再読み込みします。
- スマホ版のサイトが表示されました。
カーソルもタッチ操作を再現したものに変わり
画面のスクロールもドラッグ（スワイプ）でできます。
ちなみに、「ご利用環境チェックツール」で
iPhone5 を再現中の chrome（Windows版） の環境を確認すると感じ。
ユーザーエージェントが偽装されているのが分かりますね。
拡張機能を入れずに
標準機能だけでユーザーエージェントを偽装できるのは便利ですね。
スマホ表示の再現（エミュレーション）を終了する場合は
手順「2」の、「スマホ」アイコンをもう一度クリックすればOK。
Chrome が再現できる機種の一覧
iPhone, Xperia, Galaxy, Nexus など様々な機種から選択できます。
その他の設定
「Network」では、ユーザーエージェント（UA）を編集できます。
「Sensors」では、センサー関連の設定ができます。
タッチ操作を再現したくない場合は「Emulate touch screen」のチェックを外します。
位置情報，加速度センサー（傾き） なども再現可能です。
デベロッパーツールを右サイドに移動
初期設定だと、デベロッパーツールはウィンドウ下側に表示されますが
スマホ表示を再現している時は右サイドにある方が何かと便利。
- スマホ表示を再現している状態。
- デベロッパーツール右側にあるウィンドウが重なっているアイコンの上で
マウスの左ボタンを長押し（ホールド）します。
すると、下に別のアイコンが表示されるので
マウスのボタンを押したまま下のアイコンに移動して離します（リリース）。
- デベロッパーツールが右サイドに移動しました。
デベロッパーツールの位置を下に戻す時は
同じ位置にあるアイコンをもう一度クリックすればOK。
デベロッパーツールを別ウィンドウで開きたい時は
再度、アイコン上を長押しして同様の操作をして下さい。
エミュレーション（Emulation）という名前のとおり
あくまで、その機種に似せいているだけに過ぎず
実際の機種とは表示が異なる部分もあります。
簡易的な再現をする機能だと割り切って使いましょう。
コメント