ビューポートサイズチェッカー

ブラウザのページ領域の正確なサイズと、該当するブレークポイントがわかります。

ブラウザ内で動作
アップロード不要
アカウント不要

ブラウザツールを読み込んでいます…

ビューポートサイズチェッカーでできること

Web デザイナー、QA テスター、レイアウトのバグを報告する人が知りたいことは同じです。今、ブラウザのページ領域の幅はいくつか。見出しには、メディアクエリが使う単位である CSS ピクセルでその値を表示し、ウィンドウの端をドラッグするとリアルタイムで変わります。

表では、スクロールバーを含むサイズと含まないサイズを分けて表示するので、縦のスクロールバーが 15 や 17 ピクセルを使っているかがわかります。スマートフォン向けにビジュアルビューポートとピンチズームの倍率も表示し、スマートフォンからワイドデスクトップまでのどのブレークポイントに当たるかも示します。ウィンドウではなく画面全体を調べるには、画面解像度チェッカーを使ってください。

例

お使いの環境

MacBook の Chrome、ウィンドウ幅 1440 CSS ピクセル、オーバーレイ型スクロールバー、デバイスピクセル比 2

レポートの表示

ビューポート：1440 × 813
CSS ピクセル · 特大（1280〜1535 px、デスクトップ）
スクロールバーの幅：0 px
ビューポート（デバイスピクセル）：2880 × 1626

macOS はスクロールするまでスクロールバーを隠すため、幅を取りません。Windows では、同じウィンドウに通常約 15 px のスクロールバーが表示されます。

ビューポートサイズチェッカーの使い方

測りたいブラウザとウィンドウでページを開きます。
ウィンドウのサイズを変え、サイズとブレークポイントが更新されるのを確認します。
「コピー」をクリックして、数値をバグ報告に添えます。

知っておきたいこと

ブレークポイントの名前は、640、768、1024、1280、1536 px という一般的な既定値に基づいています。サイト独自の CSS は、別の幅でレイアウトを切り替えている場合があります。
測定するのはページ領域で、タブやツールバーを含む外側のウィンドウではありません。ドッキングした開発者ツールも、ビューポートの領域を使います。
ブラウザのズームで、CSS ピクセルでのビューポートは変わります。幅 1440 px のウィンドウを 125% にズームすると 1152 px と表示されます。

ビューポートサイズチェッカーについてよくある質問

ブラウザのウィンドウの大きさは？

見出しに、このウィンドウのページ領域を CSS ピクセルで、幅、高さの順に表示します。これは Web ページから見えるサイズで、タブの録画でキャプチャされるサイズでもあります。ウィンドウのサイズを変えると、数値はすぐに変わります。

ビューポートと画面解像度の違いは何ですか？

画面解像度はディスプレイ全体です。ビューポートは、アドレスバー、タブ、ウィンドウ枠を除いた、ページが描画されるブラウザウィンドウ内の部分だけです。ノートパソコンでは、ビューポートは画面より数百ピクセル低いのが普通です。

サイトはどのビューポートサイズでテストすればよいですか？

スマートフォンの幅として 375〜430 px 程度、タブレットとして 768 px 前後、ノートパソコンとして 1280〜1440 px 程度、ワイドデスクトップとして 1920 px を確認してください。レイアウトは切り替わる直前で崩れやすいので、各ブレークポイントのすぐ下の幅もチェックしましょう。

スマートフォンでキーボードを開くと、ビューポートが変わるのはなぜですか？

画面キーボードがページの一部を覆うためです。ブラウザはビジュアルビューポートを見えている部分まで縮めますが、レイアウトビューポートは変わらないことが多く、そのため固定ヘッダーやフッターが跳ねるように動くことがあります。