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

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

 

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

・Galaxy S5

・Nexus 5X

・Nexus 6P

iPhone 5

iPhone 6

iPhone 6 Plus

iPad

 

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

 

簡単3ステップです。

 

1.デベロッパーツールの表示

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

 

 

2.スマートフォン版画面の表示

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

 

f:id:somegoro:20160516181603p:plain

 

 

3.デバイス選択

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

 

 

 

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

 

今回も簡単でしたね。