日常の計算 / CLEARBYTE
CSSピクセルをデバイスピクセルに変換
各CSS寸法にデバイスピクセル比を掛けます。800×600 CSSピクセル、比率2なら描画領域は1,600×1,200ピクセルです。
隔離されたツール · ネットワーク接続を遮断
計算式と方法
Backing width = ceil(CSS width × DPR); backing height = ceil(CSS height × DPR).計算例
| 入力 | 値 |
|---|---|
| CSS 幅 | 800 CSS px |
| CSS 高さ | 600 CSS px |
| デバイスピクセル比 | 2 × |
| 結果 | 値 |
|---|---|
| 切り上げた描画バッファ幅 | 1,600 px |
| 切り上げた描画バッファ高 | 1,200 px |
| 描画バッファの総画素数 | 1,920,000 |
シナリオを比較
最初の入力だけを変え、ほかの入力は計算例の値に固定します。計算上のシナリオであり、予測ではありません。
| シナリオを比較 | CSS 幅 CSS px | 切り上げた描画バッファ幅 | 切り上げた描画バッファ高 | 描画バッファの総画素数 |
|---|---|---|---|---|
| −20% | 640 | 1,280 px | 1,200 px | 1,536,000 |
| 計算例 | 800 | 1,600 px | 1,200 px | 1,920,000 |
| +20% | 960 | 1,920 px | 1,200 px | 2,304,000 |
前提条件と制約
描画用ピクセルに端数が出ないよう各寸法を切り上げます。比率は手入力で画面検出はしません。ブラウザ、ズーム、描画方法で表示が変わります。
表示結果は丸められています。計算には丸め前の JavaScript の数値を使うため、わずかな浮動小数点誤差が生じることがあります。
ブラウザ内で動作
対話型ツールは、ネットワーク接続を遮断したサンドボックス内で動作します。ClearByte や広告スクリプトは、その中の入力値を読み取れません。ブラウザ拡張機能や侵害された端末は、この保護の対象外です。
出典と定義
計算方法の確認日: