ビューポートサイズ＆レスポンシブブレークポイントテスター

自分のブラウザウィンドウがWebページにとってどれくらいの大きさなのかを確認しましょう。このツールはビューポートの幅と高さをCSSピクセルで読み取り、デバイスピクセル比と画面の向き、現在のサイズが該当するレスポンシブブレークポイントをすべてリアルタイムで表示します。ウィンドウをリサイズすると、すべての値が即座に更新されます。

—×—px

ブラウザウィンドウをリサイズすると、これらの値がリアルタイムで更新されます。

ビューポートを読み取り中…ブレークポイント: —

ビューポート

—

window.innerWidth × innerHeight（CSS px）

レイアウトビューポート

—

documentElementのクライアントサイズ

デバイスピクセル比

—

CSS px → 物理 px

画面の向き

—

横幅が縦より長いか、縦が横より長いか

Tailwind CSSのブレークポイント

リサイズすると、ビューポートが該当する範囲がハイライトされます。

プレフィックス	最小幅	適用範囲
base	0px	0 – 639px
sm	640px	640 – 767px
md	768px	768 – 1023px
lg	1024px	1024 – 1279px
xl	1280px	1280 – 1535px
2xl	1536px	1536px+

デバイスカテゴリー

モバイル

<640px

タブレット

640–1023px

ラップトップ

1024–1439px

デスクトップ

≥1440px

リサイズ可能なテストパネル

右下の角をドラッグしてこのパネルをリサイズしてください。パネル自身のサイズと、その幅が該当するブレークポイントを表示します。手早いレスポンシブ確認ツールです。

パネルサイズ—パネルのブレークポイント—

—

右下の角をドラッグ ↘

一般的なデバイスのビューポートサイズ

参考用のおおよその縦向きCSSピクセルビューポートです。実際の値はブラウザやOSによって異なります。

デバイス	ビューポート（CSS px）	DPR
iPhone SE	375 × 667	2×
iPhone 15 / 14 Pro	393 × 852	3×
Pixel 8	412 × 915	2.6×
iPad mini	768 × 1024	2×
iPad Pro 11"	834 × 1194	2×
Surface Pro	912 × 1368	2×
Laptop (720p)	1280 × 720	1×
Laptop (1080p)	1366 × 768	1×
Desktop (1080p)	1920 × 1080	1×

ビューポートとは

ビューポートとは、Webページが描画できる可視領域のことです。ブラウザウィンドウのコンテンツ領域を指し、タブ、アドレスバー、ブックマークバーは含まれません。そのため、画面解像度よりもほぼ常に小さくなります。画面はパネル全体を指しますが、ビューポートはページが利用できる部分だけを指すからです。window.innerWidthとwindow.innerHeightはこの領域をCSSピクセルで報告し、documentElement.clientWidth/clientHeightはレイアウトビューポート（スクロールバーが表示されている場合はその幅を差し引いた同じ領域）を報告します。ビューポートはウィンドウをリサイズしたり、画面分割したり、デバイスを回転させたりした瞬間に変化するため、レスポンシブレイアウトが実際に反応する数値はこのビューポートです。

CSSピクセルとデバイスピクセル、そしてdevicePixelRatio

CSSピクセルはレイアウト上の単位であり、パネル上の物理的な点ではありません。標準的なディスプレイでは1つのCSSピクセルが1つの物理ピクセルに対応しますが、高密度な「Retina」ディスプレイでは、テキストをよりシャープに見せるために1つのCSSピクセルに2〜3個の物理ピクセルを詰め込んでいます。window.devicePixelRatioはその倍率を示します。値が2であれば、幅1440CSSピクセルのビューポートは2880個の物理ピクセルで描画されていることになります。Webページの配置はCSSピクセルで行われるため、DPRが3で幅390ピクセルのビューポートを報告するスマートフォンは、物理パネルの幅がおよそ1170ピクセルということになります。画面の物理解像度とピクセル密度全体を確認するには、What Is My Screen SizeとScreen Resolution Testのツールをご利用ください。

レスポンシブブレークポイント

ブレークポイントとは、レイアウトが変化するビューポート幅のことです。列が積み重なったり、メニューが折りたたまれたり、文字サイズが変わったりします。CSSメディアクエリやTailwind CSSのようなユーティリティフレームワークは、少数の名前付き幅を定義し、その幅以上でスタイルを適用します。Tailwindのデフォルトはsmが640px、mdが768px、lgが1024px、xlが1280px、2xlが1536pxで、640px未満はプレフィックスなしのbase範囲になります。以下のリファレンスはリサイズに合わせてアクティブな範囲をハイライトし、ドラッグ可能なテストパネルは自身の幅がどのブレークポイントに該当するかを報告します。ウィンドウ全体を変更せずに、コンポーネントがさまざまなサイズでどう動作するかを手早くプレビューできます。

innerWidthが画面幅と異なる理由

パネルの解像度とページが認識するビューポートの間には、いくつかの要素が介在します。ブラウザのUI（タブ、ツールバー、表示中のスクロールバー）は利用可能な領域から差し引かれます。ページの拡大率もこれに影響します。ズームインすると収まるCSSピクセル数が減るため、ウィンドウが動いていなくてもinnerWidthは減少し、devicePixelRatioにもわずかに影響します。モバイルではmetaビューポートタグ（<meta name="viewport" content="width=device-width, initial-scale=1">）が、ブラウザに対して約980pxのデスクトップであるかのように振る舞う代わりに、レイアウトビューポートをデバイス幅に設定するよう指示します。これがレスポンシブサイトにこのタグが必要な理由です。OSのディスプレイスケーリングもCSSピクセル数を変化させるため、同一の2台のモニターでも異なるビューポートサイズが報告されることがあります。