Chromeでスマホの表示を再現(エミュレーション)

この記事は約3分で読めます。
記事内に広告が含まれています

操作画面

こんにちは、さち です。

今回は、Google Chrome で
スマホでの表示を再現(エミュレート,エミュレーション)する方法について
書いていきます。

拡張機能(エクステンション)の導入は必要ないので
手順さえ覚えれば誰でもすぐに使えますよ!

スポンサーリンク

Chrome でスマホの表示を再現する

  1. 例として、このブログのPC版サイトを開きました。
    「Ctrl + Shift + I」キーを押します。
    操作画面
  2. 「スマホ」アイコンをクリック。
    操作画面
  3. 下に新たにツール(drawer)が表示されました。
    「Emulation」タブが開いている状態のはずです。
    操作画面
  4. 「Model」をクリック。
    操作画面
  5. 再現する機種を選択します。
    例では、「iPhone5」を選択肢ました。(機種一覧は後述)
    操作画面
  6. 機種を選択すると
    画面サイズ(Resolution),デバイス・ピクセル比(Device pixel ratio) が設定されます。
    (「デバイス・ピクセル比」って何?という人はこちらが分かりやすいです)
    操作画面
  7. ページを再読み込みします。
    操作画面
  8. スマホ版のサイトが表示されました。
    カーソルもタッチ操作を再現したものに変わり
    画面のスクロールもドラッグ(スワイプ)でできます。
    操作画面

ちなみに、「ご利用環境チェックツール」で
iPhone5 を再現中の chrome(Windows版) の環境を確認すると感じ。
ユーザーエージェントが偽装されているのが分かりますね。
操作画面

拡張機能を入れずに
標準機能だけでユーザーエージェントを偽装できるのは便利ですね。

スマホ表示の再現(エミュレーション)を終了する場合は
手順「2」の、「スマホ」アイコンをもう一度クリックすればOK。

Chrome が再現できる機種の一覧

iPhone, Xperia, Galaxy, Nexus など様々な機種から選択できます。
機種一覧

その他の設定

「Network」では、ユーザーエージェント(UA)を編集できます。
操作画面

「Sensors」では、センサー関連の設定ができます。
タッチ操作を再現したくない場合は「Emulate touch screen」のチェックを外します。
位置情報,加速度センサー(傾き) なども再現可能です。
操作画面

デベロッパーツールを右サイドに移動

初期設定だと、デベロッパーツールはウィンドウ下側に表示されますが
スマホ表示を再現している時は右サイドにある方が何かと便利。

  1. スマホ表示を再現している状態。
    操作画面
  2. デベロッパーツール右側にあるウィンドウが重なっているアイコンの上で
    マウスの左ボタンを長押し(ホールド)します。
    すると、下に別のアイコンが表示されるので
    マウスのボタンを押したまま下のアイコンに移動して離します(リリース)。
    操作画面
  3. デベロッパーツールが右サイドに移動しました。
    操作画面

デベロッパーツールの位置を下に戻す時は
同じ位置にあるアイコンをもう一度クリックすればOK。

デベロッパーツールを別ウィンドウで開きたい時は
再度、アイコン上を長押しして同様の操作をして下さい。

エミュレーション(Emulation)という名前のとおり
あくまで、その機種に似せいているだけに過ぎず
実際の機種とは表示が異なる部分もあります。
簡易的な再現をする機能だと割り切って使いましょう。

コメント

タイトルとURLをコピーしました