ビューポートサイズ＆レスポンシブブレークポイントテスター

ビューポートとは、ウェブページが描画しなければならない領域のことです。つまり、タブ、アドレスバー、スクロールバーを除いたブラウザのウィンドウです。だからこそ、ほとんど常に画面の解像度より小さいのです。画面はパネル全体で、ビューポートはページが使えるスライスだけです。これは物理的な点ではなくCSSピクセル、レイアウト単位で測定されます。高密度の「Retina」ディスプレイは、1つのCSSピクセルに2〜3個の物理ピクセルを詰め込むため、テキストがより鮮明に見えます。window.devicePixelRatioはその倍率を報告します。

このツールは、リサイズや向きの変更ごとにwindow.innerWidthとwindow.innerHeightを読み取り、documentElement.clientWidth/clientHeightのレイアウトビューポート、デバイスのピクセル比、向きも読み取っています。ブレークポイントとは、レイアウトが変化するビューポート幅のことで、列が積み重なったり、メニューが折りたたまれたり、文字サイズが変わったりします。Tailwind CSSのようなフレームワークは、名前付きの幅のセットを起点として、それ以上の幅にスタイルを適用します。以下の参照は、あなたの幅がどの範囲に該当するかを示しており、ドラッグ可能なテストパネルは自分の幅が到達するブレークポイントを報告するため、ウィンドウ全体をリサイズせずにコンポーネントをプレビューできます。すべてローカルで動作します。何もアップロードされていません。

数値がずれているように見える場合、パネルの解像度とページが見るビューポートの間にはいくつかの要素が存在します。ブラウザの外側のUI部分(アドレスバーなど)やスクロールバーは使用可能な領域を減らし、ページズームはCSSピクセル数を縮小します。つまり、ウィンドウを動かさなくてもinnerWidthは減少します。OSのディスプレイスケーリングも同様で、これが同一のモニターが異なるサイズを報告することがある理由です。スマートフォンでは、メタビューポートタグ<meta name="viewport" content="width=device-width, initial-scale=1">が、約980pxのデスクトップを偽装するのではなく、デバイス幅でページをレイアウトします。そのため、DPR 3における390pxのビューポートは、物理的には約1170ピクセル幅のパネル上に位置することになります。画面の物理的な解像度とピクセル密度を確認するには、「What Is My Screen Size」と「Screen Resolution Test」のツールを使ってください。

一般的なレスポンシブブレークポイント