サイトやブログのスマートフォンでの表示や動作を模擬テストできる Google Chrome の「Emulation」機能が便利

サイトやブログのデザインを修正するとき、iPhone や Android端末ではどう表示されるか確認するため、Google Chrome の「Emulation」機能を使っています。

使い方は簡単で、

  1. Google Chrome の画面を右クリック、「要素を検証」を選択
    20140916-01
  2. 画面下に現れたメニューからスマホのようなアイコンをクリック
    20140916-02
  3. 「Emulation」画面が現れるので「Device」で「Model」を選択
    20140916-03
  4. 「iPhone5」をはじめ、歴代の iPhone や Android端末が選べる
    20140916-04
  5. あとは確認したいサイトを普通に開くだけ
    20140916-05

ポインターがグレイの丸いマークで表示されて、タッチ操作の確認もできます。

この画面をキャプチャーすることで、スマートフォンでの動作をブログなどで説明するときにも使えるので便利です。

 

終了するときは画面下のメニュー右端の「x」マークをクリックして「要素を検証」の画面を閉じるか、再度「スマホ」アイコンをクリックすることでエミュレーション自体を使えなくします。

20140917-01

まだ iPhone 6 が「Device」リストの中にありませんが、早く追加されることを期待しています。

 

こちらの記事もいかがですか?