Web制作の方に便利なChrome拡張機能で
サイトのレスポンシブテストを各種デバイスで
視覚化して分かりやすくチェックできます。
ヘッダーやスクロールバーを非表示化も可能です。
目次
リンク先
インストール
上記リンク先ページをChromeで開き「Chromeに追加」をクリックします。
拡張機能を追加をクリックするとインストールが完了します。
インストール完了時にピン留めしてくださいと表示されるので画面に従ってピン留めをします。
使い方
モバイルテストしたいページでピン留めしたアイコンをクリックすると
モバイル画面で開いていたWebページが表示されます。
Chromeのデベロッパーでもモバイルでのレスポンシブのテストは可能ですが、
スマホなどの端末の外観も表示されるのでこちらの方が分かりやすいです。
画面右上のボタンから端末を変更も可能です。AndroidやiPhone、タブレットやスマートウォッチなども
用意されていて各種端末で表示チェックが可能です。
PROと書かれている端末は有料プランになります。
iPhone12で表示確認をしてみました。Safariなどブラウザのツールバーやヘッダーなども表示されるので
細かくチェックしたい場合に便利です。
ノートパソコンなどにも対応しています。
幅広くレスポンシブデザインのチェックが可能です。
設定では端末のブラウザのツールバー、ヘッダーやフッターなどの非表示、キーボードの表示有無、
デバイス固有のスクロールバーの表示有無など細かく設定も可能で
モバイル環境を再現が可能です。
一般的なWebサイトではここまで必要なさそうですが、より細かく確認したい場合、
グリッドデザインなど動作するようなWebサイトではしっかりとチェックできそうです。
コメント