スクリーン情報表示

スクリーン情報表示ツールは、ブラウザとデバイスのディスプレイプロパティの包括的なリアルタイムスナップショットを提供します。レスポンシブレイアウトのデバッグ、CSSメディアクエリのテスト、デバイスピクセル比（DPR）値の検証など、必要なすべての指標を1つのダッシュボードに表示します。

このツールは、スクリーン解像度（OSが報告する物理モニターサイズ）、ビューポートサイズ（ブラウザクロームを除くCSSレイアウトビューポート）、ウィンドウのinner/outerサイズを自動検出します。また、デバイスピクセル比も表示され、CSSピクセル1つに対応する物理ピクセル数を確認できます。これはRetinaやHiDPIレンダリングの理解に不可欠です。

専用のCSSメディアクエリマッチパネルでは、prefers-color-scheme、prefers-reduced-motion、pointer、hoverなどの人気の機能クエリのライブ状態を表示します。

レスポンシブブレークポイントインジケーターは、現在表示しているTailwind CSSとBootstrapのブレークポイントを示し、すべてのアクティブなブレークポイントをハイライトします。

タッチ機能検出では、デバイスがタッチ入力をサポートしているか、最大タッチポイント数、TouchEventとPointerEvent APIの利用可能性を報告します。一般的なデバイスサイズの一覧はビューポートサイズリファレンスもご確認ください。

すべてのデータはブラウザAPI（window、screen、navigator、matchMedia）から収集され、サーバーに送信されることはありません。結果全体をJSONオブジェクトとしてコピーし、バグレポートやドキュメントに貼り付けることができます。

1. 検査したいブラウザとデバイスでこのページを開きます。すべての値が自動的に表示されます。
2. ブラウザウィンドウをリサイズすると、すべての指標がリアルタイムで更新されます。
3. CSSメディアクエリマッチパネルで、どの機能クエリがアクティブか確認します（例：ダークモード、モーション削減）。
4. レスポンシブブレークポイントカードで、現在のTailwindとBootstrapのブレークポイントを確認します。
5. タッチ機能を確認して、タッチサポートと利用可能な入力APIを検証します。
6. Copy as JSONをクリック（またはCtrl+Shift+Cを押下）して、すべての指標をJSON形式でクリップボードにコピーします。
7. ディスプレイ設定を変更した場合は、Refreshボタンで即座に更新します。