このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:ウィンドウを効率よく操作する方法まとめ (12/09)
  • Windows:スリープ復帰時のパスワード入力をやめる (12/07)
  • Windows:ミス激減!チェックボックスでファイルを複数選択する (12/05)
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

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

    このエントリーをはてなブックマークに追加
    操作画面


    こんにちは、さち です。

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








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2016 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ