ビューポートサイズテスター
ブラウザの表示領域（ビューポート）サイズをリアルタイムで確認し、どのCSSブレイクポイントが適用されているかを即座に把握できます。デバイスプリセット一覧との比較機能付き。登録・インストール不要。 関連ツール: 画面解像度 → 画面解像度チェッカー | メディアクエリ → CSSメディアクエリジェネレーター — 幅 (px) × — 高さ (px) — ブレイクポイント — — DPR — ブレイクポイントインジケーター 0640768102412801536+ xs<640px sm640–767 md768–1023 lg1024–1279 xl1280–1535 2xl1536px+ 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) Web制作の経費管理もかんたんに ...
