こんにちは、さち です。
今回は、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)という名前のとおり
あくまで、その機種に似せいているだけに過ぎず
実際の機種とは表示が異なる部分もあります。
簡易的な再現をする機能だと割り切って使いましょう。
コメント