画面サイズと環境診断
お使いの画面、ブラウザ、デバイスの詳細情報をリアルタイムで表示。一般ユーザー、WebデザイナーやWeb開発者に役立つデータ。
画面
@mediaルールおよびBootstrapブレークポイントの基準値。col-*、d-*、fs-*クラスが判別できます。srcsetで画像を正しくスケーリングするために重要。@media (orientation: landscape)に関連し、自動更新されます。ブラウザ
navigator.language）。Webサイトはこれを使用して、ユーザーが選択しなくても優先言語でコンテンツを表示できます。navigator.onLineで検出。オフラインサポート（PWA）のあるアプリに役立ちます。ブラウザが現在ネットワークにアクセスできるかを示します。—
デバイス
navigator.maxTouchPoints）。0 = タッチスクリーンなし。navigator.hardwareConcurrency）。Web Workersやバックグラウンドタスクで可能な並列処理の度合いを示します。navigator.deviceMemory）。ブラウザはプライバシー保護のため丸めた値（0.25、0.5、1、2、4、8 GB）を報告します。診断結果を共有
すべてのデータをプレーンテキストとしてコピーし、メール、Slack、またはサポートチケットに貼り付けられます。
用語解説
ブラウザ・画面・デバイスに関する重要な概念
ビューポートは、Webページのコンテンツが表示されるブラウザの領域です。ツールバー・タブ・スクロールバーを除いた、ウィンドウ内の利用可能な幅と高さです。
CSSでは、ビューポートがメディアクエリの基準になります: @media (max-width: 768px)はビューポートの幅が768px未満のときに適用されます。また、vw（ビューポート幅）・vh（ビューポート高さ）の基準でもあります。
JavaScriptではwindow.innerWidthとwindow.innerHeightで取得できます。
ブレークポイントは、レスポンシブデザインのレイアウトが変わる幅の閾値です。Bootstrap 5では6つ定義されています:
- xs — 576px未満（縦向きスマートフォン）
- sm — 576px以上（横向きスマートフォン）
- md — 768px以上（タブレット）
- lg — 992px以上（ノートPC）
- xl — 1200px以上（デスクトップ）
- xxl — 1400px以上（大型画面）
現在のブレークポイントを知ることで、どのBootstrap CSSクラス（col-md-6・d-lg-flexなど）が有効かが分かります。
デバイスピクセル比は、デバイスの物理ピクセルとブラウザがレイアウト計算に使うCSSピクセルの比率です。
- DPR = 1 — 標準ディスプレイ。CSSピクセル1個 = 物理ピクセル1個。
- DPR = 2 — Retina / HiDPIディスプレイ。CSSピクセル1個 = 物理ピクセル2×2 = 4個。
- DPR = 3 — 高密度ディスプレイ（最新スマートフォン）。CSSピクセル1個 = 物理ピクセル3×3 = 9個。
デザイナーにとって重要: DPR 2の画面に200×200pxの画像を表示するとぼやけて見えます。srcsetやimage-set()で高解像度画像を提供する必要があります。
JavaScriptではwindow.devicePixelRatioで取得できます。
論理解像度はブラウザがレイアウト計算に使うCSSピクセルの解像度です。物理解像度はパネルの実際のピクセル数で、論理解像度 × DPRで求まります。
例: iPhone 15の論理解像度は390×844 CSSピクセルですが、物理解像度は1170×2532ピクセル（DPR = 3）です。メーカーのスペックに記載されるのは物理解像度です。
ドキュメントのサイズには、ビューポートの外側（スクロール領域）も含む全コンテンツが含まれます。通常、ドキュメントの幅はビューポートの幅と同じになるはずです。
ドキュメント幅がビューポート幅を超えている場合、水平オーバーフローが発生しています: 横スクロールバーが表示されたり、モバイルでコンテンツがはみ出したりします。document.documentElement.scrollWidthで取得できます。
ユーザーエージェントは、ブラウザが各HTTPリクエストでUser-Agentヘッダーとしてサーバーに送信する文字列です。ブラウザの種類・バージョン・OSに関する情報が含まれています。
WebサーバーやWebアプリケーションはユーザーエージェントを解析して、クライアントの種類を検出したり、最適化されたリソースを配信したり、コンテンツをカスタマイズしたりするために使用します。
レンダリングエンジンはHTMLとCSSを解釈して画面にページを描画するソフトウェアです。主なエンジンは以下の通りです:
- Blink — Chrome・Edge・Opera・Brave、その他Chromiumベースのほぼすべてのブラウザ。
- WebKit — macOS・iOSのSafari。Appleのポリシーにより、iOS上のすべてのブラウザはWebKitを使用しなければなりません。
- Gecko — Mozilla Firefox。
エンジンの違いが、同じページがSafariとChromeで異なって見える原因となることがあります。
Network Information API（主にChrome・Edgeで利用可能）を通じて、ブラウザは以下を推定できます: 実効接続タイプ（4g・3g・2g・slow-2g）、ダウンリンク速度（Mbps）、RTT遅延（ミリ秒）、データセーバーモードの有効/無効。
Firefox・SafariはプライバシーのためこのAPIを公開していないため、このセクションはそれらのブラウザでは表示されません。
srcsetを使った高密度画像準備のためDPRを調べるのに活用します。テスター・QAエンジニアは特定のデバイスでのレスポンシブ動作確認、オーバーフロー検出、User Agentの正確な識別に使います。Web開発の教師・インストラクターはビューポート・DPR・メディアクエリ・ブレークポイントといった概念を視覚的・インタラクティブに説明する授業のデモに活用します。デジタルエージェンシー・コンサルタントはCSSフレームワーク、ページビルダー、Figmaなどのデザインツールでクライアントのサイトをチェックするときのクイックリファレンスとして手元に置いています。