ブラウザの表示領域（ビューポート）サイズをリアルタイムで確認し、どのCSSブレイクポイントが適用されているかを即座に把握できます。デバイスプリセット一覧との比較機能付き。登録・インストール不要。
関連ツール: 画面解像度 → 画面解像度チェッカー | メディアクエリ → CSSメディアクエリジェネレーター
—
幅 (px)
×
—
高さ (px)
—
ブレイクポイント
window.innerWidth
—
スクロールバーを含む表示幅
window.innerHeight
—
スクロールバーを含む表示高さ
document.documentElement
— × —
clientWidth × clientHeight
screen.width × screen.height
—
物理画面の解像度
devicePixelRatio
—
CSS px と物理 px の比率
向き（Orientation）
—
縦向き / 横向き
クリップボードにコピーしました！
主要デバイスのビューポート参考値
| デバイス | ビューポート (CSS px) | Tailwind BP | 備考 |
|---|---|---|---|
| iPhone 15 Pro | 393 × 852 | xs | 縦向き、@3x |
| iPhone 15 / 14 | 390 × 844 | xs | 縦向き、@3x |
| iPhone SE（第3世代） | 375 × 667 | xs | 縦向き、@2x |
| iPad（第10世代） | 820 × 1180 | md | 縦向き、@2x |
| iPad Pro 12.9" | 1024 × 1366 | lg | 縦向き、@2x |
| Pixel 7 | 412 × 915 | xs | 縦向き、@2.625x |
| Galaxy S24 | 360 × 780 | xs | 縦向き、@3x |
| MacBook Air 13" | 1280 × 800 | xl | Retina @2x |
| MacBook Pro 14" | 1512 × 982 | xl | Retina @2x |
| MacBook Pro 16" | 1728 × 1117 | 2xl | Retina @2x |
| デスクトップ 1080p | 1920 × 1080 | 2xl | @1x 標準 |
使い方
- 上部の数値を確認 — ブラウザのウィンドウをリサイズするとリアルタイムで更新されます。
- ブレイクポイントバーをチェック — 現在の幅がTailwind CSSのどのブレイクポイント（xs / sm / md / lg / xl / 2xl）に該当するかが一目でわかります。
- デバイスプリセット一覧で比較 — 実機でどのように表示されるかの参考として活用してください。
- 「情報をコピー」ボタン — バグ報告やデザイン確認のためにスナップショットをテキストでコピーできます。
各プロパティの意味
| プロパティ | 計測対象 |
|---|---|
window.innerWidth/Height | スクロールバーを含む表示領域のサイズ |
clientWidth/Height | スクロールバーを除いた表示領域（CSSメディアクエリと一致） |
screen.width/Height | デバイスの物理画面解像度（ズームに影響されない） |
devicePixelRatio | CSS 1px が物理何ピクセルに対応するか（Retinaは2以上） |
Tailwind CSS ブレイクポイント一覧
| プレフィックス | 最小幅 | CSSルール |
|---|---|---|
| (なし — xs) | 0 px | デフォルトスタイル |
sm | 640 px | @media (min-width: 640px) |
md | 768 px | @media (min-width: 768px) |
lg | 1024 px | @media (min-width: 1024px) |
xl | 1280 px | @media (min-width: 1280px) |
2xl | 1536 px | @media (min-width: 1536px) |
確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。
関連ツール: 画面解像度 → 画面解像度チェッカー | メディアクエリ → CSSメディアクエリジェネレーター