PC、スマートフォン、タブレット画面チェック By My Choice

開いているページをPC・スマートフォン・タブレットの3画面で同時に表示し、スクロールとページ遷移を連動させて表示崩れをその場で見比べられます。

■ 3つの画面サイズを、並べて同時に確認できます ホームページの表示崩れは、PCの画面だけを見ていても気づけません。 この拡張機能は、いま開いているページをPC・スマートフォン・タブレットの3画面で同時に表示します。 ツールバーのアイコンを押すだけで比較用のタブが開くので、 デベロッパーツールを開いて画面サイズを切り替え直す手間がなくなります。 ■ スクロールが本文の位置で連動します どれか1つの画面をスクロールすると、他の画面も同じ位置に追従します。 画面の幅が違うとページの長さも変わりますが、画面の上部に映っている見出しや段落を目印にして揃えるため、 「PCではこう見えるこの部分が、スマートフォンではこう見える」をそのまま並べて確認できます。 ページ全体に対する割合で揃える方式、先頭からのピクセル数で揃える方式にも切り替えられます。 リンクを押したときのページ遷移も連動するので、サイト全体を通しでチェックできます。 ■ 縦・横の切り替え スマートフォンとタブレットは、各画面のヘッダーにある「縦 / 横」ボタンで向きを変えられます。 横向きにするとレイアウトの分岐点を超えるページが多いため、横にしたときの崩れも確認できます。 ■ 画面の幅は一覧から選べます スマートフォンは320pxから440pxまで、タブレットは744pxから1024pxまでの幅を用意しています。 CSSのレイアウトは画面の幅で切り替わるため、幅を順番に試すことで崩れが始まる境目を見つけられます。 PCは1280pxからフルHDまで5種類を用意しています。 ■ 表示のしかたも自由に ・見たい画面だけに絞り込むと、残りが自動で拡大してウィンドウの横幅を使い切ります ・実際の画面サイズで見るか、ウィンドウいっぱいの高さで見るかを選べます ・並べた比較画面をそのままPNG画像として保存できます。報告書やチャットにそのまま貼れます ■ こんな方に ・制作したページのスマートフォン表示を毎回チェックしている制作者の方 ・「PCでは問題ないが、スマートフォンではこう見える」をお客様に説明したい方 ・複数の画面幅でファーストビューの見え方を確認したい方 ■ プライバシーについて 閲覧内容の収集・外部送信は一切行いません。 保存するのは表示設定（どの画面を表示するか、画面の幅、表示倍率、向き、同期方式）だけで、 すべてお使いのブラウザ内に保存されます。