最近ではレスポンシブWebサイトが人気です。一つのデザイン/HTMLですべてのデスクトップやデバイスに対応するため、テストがとても大変です。多くはスマートフォン、タブレット、デスクトップの3種類に対応するのが一般的です。さらに画面の向きが縦横あるのが厄介です。
そしてレスポンシブなデザインでサイトを作っていて、テストをしてみるとデザインが崩れている！といった事態に遭遇することは多々あります。そうした時のデザインの修正にも開発者ツールが利用できます。
Google Chromeの場合
Google ChromeのDevToolsの場合、左上のDevice Modeを有効にするとスマートフォンやタブレットなどのデバイスに合わせた画面幅に調整してくれます。DevToolsの場合、Kindle、iPhone、iPad、Nexus、Galaxyなどの各種デバイスの他、自由に幅を変更することもできます。
また、画面の向きは縦または横向きに指定ができます。デスクトップ向けにはユーザエージェントを変更して表示の違いを確認できます。
Firefox Developer Editionの場合
Firefoxの場合、レスポンシブデザインモードという設定を有効にすればモバイルデバイスのレイアウトが確認できます。特定のデバイスを選んで指定する訳ではなく、320×480などサイズで指定する形になります。
スクリーンショットを撮る機能があるのでデザインの調整をしながらスクリーンショットを撮って保存しておくのが便利です。
Safariの場合
Safariの場合は開発者ツールではなく、開発メニューのレスポンシブ・デザイン・モードを使います。ここでデバイスの画面サイズやRetina指定も行うことができます。iPhone/iPadの各種バージョンを簡単に指定できますが、Android系デバイスは登録されていません。
この他、実機を接続して実機レベルでのデザインの確認ができます。シミュレータでも可能です。この場合もiOSに限定されますが、実機でしか動かない機能があった場合はデザインの確認に役立つかも知れません。
IEの場合
IEはエミュレーションタブで指定できるようになっています。ブラウザプロファイルで指定したり、ディスプレイの解像度と向きを指定できます。レンダリングエンジンの互換性を考えると、Windows Phone向けのデザイン確認に使えるかと思います。
各ブラウザとも基本的にスマートフォン、タブレットでのエミュレーションをサポートしています。それぞれにやり方が異なるのが面白い点ではあります。
