スクリーンサイズ・Viewportチェッカー
このページを開いているブラウザの window.innerWidth などのビューポートサイズ・ウィンドウサイズ・画面解像度・デバイスピクセル比・現在のTailwind CSSブレークポイントなどをリアルタイムで表示します。ウィンドウサイズを変更したり、開発者ツールのデバイスツールバーで端末を切り替えたりすると、下の表が自動的に更新されます。ブラウザ内で処理され、値がサーバーに送信されることはありません。キーボードイベントの値を確認したい場合は キーコード（e.code/e.key）チェッカー もあわせてご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
| ビューポートサイズ | |
| ブラウザウィンドウサイズ | |
| 画面解像度 | |
| 利用可能な画面サイズ | |
| デバイスピクセル比（DPR） | |
| 画面の向き | |
| 現在のブレークポイント | |
| OSのカラースキーム設定 | |
| タッチ操作 |
ブレークポイント早見表（Tailwind CSS）
| 名前 | 最小幅 |
|---|---|
| なし | 〜639px |
| sm | 640px〜 |
| md | 768px〜 |
| lg | 1024px〜 |
| xl | 1280px〜 |
| 2xl | 1536px〜 |
こんな時に便利
- レスポンシブデザインの実装中に、実機やブラウザのウィンドウサイズが今どのブレークポイントに該当するかを確認したいとき。
- Retinaディスプレイ等の高解像度端末でデバイスピクセル比（DPR）がいくつになるか確認したいとき。
- 問い合わせ対応や不具合調査で、ユーザーの画面サイズ・向き・タッチ操作対応状況をざっくり把握したいとき。
注意事項
- 「画面解像度」「利用可能な画面サイズ」はOS・ディスプレイ設定の拡大率（スケーリング）の影響を受けるため、ディスプレイの物理解像度とは一致しない場合があります。
- 「タッチ操作」の判定は端末がタッチ入力に対応しているかの簡易的な目安であり、実際にタッチ操作可能かはOS・入力デバイスの状態にも依存します。
- 「OSのカラースキーム設定」はOS・ブラウザ側の`prefers-color-scheme`の値であり、このサイト自体の表示（サイドバーのテーマ切り替えで手動選択したライト/ダーク）とは独立しています。両者が食い違うことがあります。
- ブレークポイントの区分はTailwind CSSのデフォルト値（sm: 640px / md: 768px / lg: 1024px / xl: 1280px / 2xl: 1536px）に基づいており、プロジェクトごとにカスタマイズされている場合は実際の設定値と異なることがあります。
用語解説
ビューポート
ブラウザの中でWebページが実際に表示されている領域の幅・高さ（`window.innerWidth`/`innerHeight`）です。アドレスバーやスクロールバーは含みません。レスポンシブデザインの`@media`クエリはこの値を基準に判定されます。
デバイスピクセル比（DPR）
CSS上の1pxが実際の物理ピクセル何個分に相当するかを表す値です（`window.devicePixelRatio`）。Retinaディスプレイ等の高解像度端末では2や3になり、画像を高解像度で用意すべきかの判断に使われます。
ブレークポイント
レスポンシブデザインにおいて、レイアウトを切り替える画面幅の境目のことです。本ツールではTailwind CSSのデフォルト値（sm/md/lg/xl/2xl）を基準に、現在の幅がどの段階に該当するかを表示します。
prefers-color-scheme
OS・ブラウザ側のダークモード/ライトモード設定を検知するCSSメディア特性です。`window.matchMedia("(prefers-color-scheme: dark)")`で取得でき、サイト側のテーマ初期値の決定などに使われます。
よくある質問
画面解像度がディスプレイの物理解像度と違うのはなぜですか？
画面解像度は、OSやディスプレイの拡大率（スケーリング）の影響を受けるためです。高DPIの画面では、物理解像度よりも小さい値が表示されます。デバイスピクセル比もあわせて確認してください。
どのブレークポイントが使われていますか？
Tailwind CSSのデフォルト値（sm: 640px / md: 768px / lg: 1024px / xl: 1280px / 2xl: 1536px）に基づいて判定します。プロジェクトで変更している場合は、実際の設定と異なります。
サイトのダークモード設定と関係がありますか？
「OSのカラースキーム設定」はOSやブラウザのprefers-color-schemeの値で、このサイトのテーマ切り替えとは独立しています。
このページをシェア