WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >作業効率化

WEBサイトを制作した時、必ずチェックするスマホ表示。
色々なツールがありますが、今回ご紹介する「ビューポートリサイザー」はChromeの拡張機能です。
他のレスポンシブ確認ツールには無い機能が色々あるので、ご紹介していきます！

導入と起動

こちらから機能を追加したら、確認したいページを開いて起動します。

各ツールの説明

拡張機能を起動させると、下記の様な画面になります。
それぞれ説明していきます。

• ①上記画像 赤□枠内で選択しているデバイスの縁を付けて表示します（iPhoneなら丸枠・Androidなら四角い枠 等）
• ②画面表示エリアの画面上部に各デバイスで設定されている余白を追加します
• ③メジャーを表示します（px単位）
• ④グリッドを表示します
• ⑤各デバイスの横幅を一覧で表示します
• ⑥設定しているメディアクエリを一覧で表示します
• ⑦タップ時の挙動を確認できます
• ⑧デバイスサイズをスライドショーで表示してくれます

デバイスサイズ

画像上部の赤い□で囲っている部分をクリックすると、各デバイスサイズを選択できます。
確認できるデバイスサイズは下記です。

• iPhone 15 Pro Max（横480px）
• iPhone 13 Pro（横390px）
• Samsung Galaxy S24 Ultra（横360px）
• Google Pixel8 Pro（横412px）
• Apple Ipad Pro 12.9-inch（横1024px）
• Samsung Galaxy Tab S9 Ultra（横800px）
• Microsoft Surface Pro9（横900px）
• Apple MacBook Air（M2,2022）（横1680px）
• Microsoft Surface Laptop 5 (2022)（横2496px）
• Apple Watch Series 9 (2023)（横198px）
• Samsung Galaxy Watch 6 (2023)（横200px）
• WSXGA（横1440px）

便利な機能

画面上部の余白追加

自身が使用しているデバイスが iPhone 13 mini なのですが、画面上部の真ん中にインカメラがついており、カメラと被らないようにディスプレイ上部に余白が設けられているのですが・・・
この余白、デバイスによってあったり無かったりしますよね。
その余白がある場合・無い場合を確認できるかゆい所に手が届く画期的な機能が画像②の機能です！

グリッド表示

画像④のグリッド表示は下記の図の様に、余白の確認に非常に便利です。
CSSをアップロードしてスマホでもう一度確認して・・・という手間が大幅に省けます！

メディアクエリの一覧表示

画像⑥のメディアクエリは、実際にコーディングで設定しているメディアクエリが全て表示されます。
設定したタイミングどこだっけ？となっても、こちらの機能があることによって一目瞭然で確認できるため非常にオススメです。

終わりに

似たような拡張機能が色々とありますが、それぞれに特徴があるので、自分が求めているものなのか吟味して使用する事によって、無駄を省いて効率よく仕事が捗ります♪
ぜひレスポンシブチェックの際に使ってみてください！