2014年11月18日

MacやWindowsでiPhone、iPad、Androidの表示レイアウトを確認する方法

WindowsやMacで手軽にスマホサイトのレイアウトを確認する方法をご紹介いたします。
iPhoneやiPadのレイアウトの確認にはiOSの実機を使うか、MacにXcodeをインストールし、iOSシュミレーターで確認しなければなりませんでした。

しかし、フリーの高性能ブラウザChromeならiOSだけでなくAndroidやKindleもレイアウトを表示確認することができます。

Chromeを起動したら、右クリック→「要素を検証」を選択。

虫眼鏡の右側のスマホのアイコンをクリック。

画面左上に縮小されたブラウザが表示されます。この段階ではまだスマホのレイアウトが反映されません。リロードします。

スマホサイトに切り替わりました。レスポンシブデザインに対応していない場合は、ブラウザの枠だけ縮小された状態になります。

iPhone6プラスや第四世代iPad、Kindle Fire、Nexus7など検証できるデバイスはとても充実してます。

スマホが違えばブラウザの横幅も異なります。どんなブラウザにも対応できるようにマルチブラウザ化させる必要がありますね。

この情報を共有する

0 件のコメント :

コメントを投稿

Related Posts Plugin for WordPress, Blogger...