サイトのレスポンシブ表示の確認は何を使っているでしょうか？
ChromeやSafariなどのブラウザ開発ツールや実機を使って確認すると思いますが、様々のモニターサイズやデバイスをまとめてチェックできる便利なツール「ResponsivelyApp」を紹介したいと思います。
ResponsivelyAppはレスポンシブ表示をチェックするためのアプリケーションでMac／Windows／Linuxで利用できます。
ResponsivelyAppはサイト表示を確認するためのWeb開発者向けのアプリケーションです。
上記キャプチャのようにさまざなサイズのモバイルやモニターの表示確認が同時に行えます。モバイルやタブレットはiPhone6/7/8やiPhone Xなどのサイズがデフォルトで登録されいます。また縦向き横向きも変更できます。
モニターも縦横のサイズを自由に設定し追加することも可能なので、確認したいデバイスやモニターを自由に組み合わせて確認できます。
デバイスサイズごと、または全デバイス一括でスクリーンショットを撮ることができます。修正指示を出すときに簡単にキャプチャを取って指示を出せます。
スクリーンショットは画面に表示している範囲とページ全範囲とキャプチャが可能です。
Chromeと同じようにインスペクタでCSSやJSのコンソールを確認できます。表示が崩れているデバイスがあれば個別にインスペクタを表示できるので調整がしやすくなります。
その他、
など、細かい部分もフォローしてくれる機能もついています。
まずアプリを起動したらデフォルトでデバイスが登録されているので、アドレスバーにURLを入力するだけにすぐにページの表示確認ができます。
また、ページ遷移やスクロールなど、１つのデバイスを操作するとすべてのデバイスが同期して動きます。
デフォルトで登録されている以外のデバイスの追加や削除は、左メニューの「DEVICES」の「Customize」ボタンからドラッグ&ドロップで行えます。
これだけ多機能で便利なアプリですが、ブラウザのレンダリングエンジンやシステムフォントは実機とは違うため、最終チェックには使えません。
あくまで開発時の効率化のために使うようにしましょう。
Chromeなどのインスペクタで確認するより素早く多くのデバイスで表示確認がおこなえるので、インスペクタで表示確認している開発者の方は一度試してみてはいかがでしょうか。
