画面サイズと環境診断
お使いの画面、ブラウザ、デバイスの詳細情報をリアルタイムで表示。一般ユーザー、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を公開していないため、このセクションはそれらのブラウザでは表示されません。