レスポンシブなWebデザインが当たり前になっており、その表示確認が大変になっています。Webブラウザの幅を変えたり、スマートフォンやタブレットでの表示を確認したりしている方は多いでしょう。 そうした手間を減らせそうなのがResponsive Viewerです。一気に複数デバイスでの表示を確認できます。

Responsive Viewerの使い方

こんな感じでまとめて表示を確認できます。

幅が広いタブレットでの表示も確認できます。

クリック連動で、一つの画面でリンクをクリックすればすべての表示が変更されます。

インスペクタで全デバイスでの要素の場所を確認できます。

横方向での表示確認も。

Responsive Viewerを使えば指定したデバイスでの表示をまとめて確認できます。スクロール追従もできるのですが、筆者環境ではうまく動きませんでした。デバイスの種類は追加できますので、Androidサイズでの確認もできるでしょう。

Responsive ViewerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

skmail/responsive-viewer: Responsive Viewer - chrome extension to show multiple screens in one view.