パソコンで「スマートフォン画面」を見る方法。簡単スマホアプリ開発

今回はパソコンで「スマートフォン画面」を模擬的に表示させる方法についてご紹介します。

使用するブラウザは「クローム」です。模擬的に表示できるスマートフォンの種類については、ブラウザのバージョンによって様々でしょうが、2016.05.16現在の最新版クロームバージョン 50.0.2661.102 mでは、次のとおりのスマートフォンが模擬的に表示できます。

・Galaxy S5

・Nexus 5X

・Nexus 6P

・iPhone 5

・iPhone 6

・iPhone 6 Plus

・iPad

それでは作業に入っていきましょう。

簡単３ステップです。

１．デベロッパーツールの表示

まずは、先日の記事でご紹介したとおりに「デベロッパーツール」画面を表示させてください。F12ボタンまたは、ブラウザのその他のツールからデベロッパーツールで表示されます。

２．スマートフォン版画面の表示

デベロッパーツールが表示されたら、スマートフォンのアイコンになっている「Toggle Device Mode」を選択すると、このような画面が表示されます。

３．デバイス選択

最後に、デバイスの設定です。 画面中央上部にデバイス選択できるトグルが出てきますので、それを選択してください。

 パソコンで「スマートフォン画面」を模擬的に表示させることが出来ましたね。

今回も簡単でしたね。