web-dev-qa-db-ja.com

CSSピクセルサイズの計算方法

CSSユニットを詳しく調べていると、参照ピクセルの定義に遭遇しました。しかし、CSSピクセルユニットとの関係について一貫した包括的な説明を見つけることができませんでした。私はこの問題についていくつかの研究を行いましたが、それでも私にはまだ少し不明瞭です。

1.収集された情報

1.1ピクセル定義

ピクセルには2つの異なるタイプ/定義があります。

「デバイスピクセル」 —ディスプレイ上の単一の物理的ポイント。

そして：

CSSピクセル —参照ピクセルに最も近い単位。 [ 1 ]

同じ名前の2つの並行した概念は、混乱を明確にしない。 2番目のものを導入する目的は完全に理解していますが、その命名法は誤解を招くものです。 CSSピクセルは絶対単位として分類され、次のとおりです。

「絶対長さの単位は相互に関連して固定されています。」 [ 1 ]

上記のステートメントは、ピクセルを除くすべてのユニットでかなり明白に見えます。 w3c仕様に従って：

「CSSデバイスの場合、これらの寸法は、（i）物理単位を物理測定値に関連付けることによって、または（ii）ピクセル単位を参照ピクセルに関連付けることによって固定されます。

（...）アンカーユニットがピクセルユニットである場合、物理ユニットが物理測定値と一致しない場合があることに注意してください。あるいは、アンカーユニットが物理ユニットである場合、ピクセルユニットはデバイスピクセルの整数にマッピングされない可能性があります。 "[ 1 ]

前述の引用を考慮すると、絶対ピクセルは参照ピクセルに固定されている可能性があるため、絶対単位がすべて絶対単位ではないことを前提としています。

1.2参照ピクセル

参照ピクセル自体は、実際にはangular測定値[ 2 ]：

「参照ピクセルは、ピクセル密度96dpiのデバイス上の1ピクセルの視角であり、リーダーから腕までの距離です。公称腕の長さ28インチの場合、視角は約0.0213度です。」 [ 1 ]

以下の画像に示されているもの：

enter image description here

参照ピクセルを視覚的な角度として定義しているにもかかわらず、さらに読むことができます：

「腕の長さで読むには、 したがって、1pxは約0.26 mm（1/96インチ）に相当します」

矛盾を別にすれば、角度の値を確立できます。

α = 2 * arctan(0.026/142) = 0.02098°

where:
    α — a value of the visual angle

したがって、表示される単位のサイズは次のようになります。

y = 2x * tan(0.01049°)

where:
    y — a displayed unit size
    x — a reading distance

上記の式を使用して、単位サイズを計算するには、実際の読み取り距離を決定する必要があります。ユーザーによって異なる場合があるため、その分類はデバイスのDPIに基づいています。

1.2.1 DPI

便宜上、DPI == PPI。

この測定により、ディスプレイの種類を推測できます。クイックチェック：

  • Iphone 6 （4.7 "、1334×750）： 326 ppi;
  • Sony Bravia 4K（54.6 "、3840×2160）： 75 ppi。

そのため、一般的に、より大きいPPI=ユーザーが座っている画面に近づく。以下の表[ 3 ]特定のDPIを備えたデバイスの推奨読書距離を示します。

 ——————————————————————————————————————— 
 | DPI  | ピクセルサイズ | 読書距離 | 
 ———————————————————————————————————————————— ———————— 
 |PCのCRT     | 96 | 〜0.2646 mm | 〜71 cm | 
 |表示      | | | | 
 ——————————————————————————————————————————— ————————— 
 |ラップトップのLCD | 125 | 0.2032 mm | 〜55 cm | 
 |表示      | | | | 
 ——————————————————————————————————————————— ————————— 
 |タブレット       | 160 | 〜0.159 mm | 〜43 cm | 
 ————————————————————————————————————————— ————————————

ただし、これらの距離値がどのように取得されたかはわかりません。 DPIとの関係は関数で記述されていますか、それとも単なる経験的な観察ですか？

1.2.2デバイスのピクセル比

Retinaディスプレイの導入により、問題はさらに複雑になりました。そのPPIはRetina以外のものより約2倍大きい傾向がありますが、推奨される読み取り距離は同じままである必要があります。CSSピクセルサイズはデバイスのピクセルサイズと必ずしも一致しないため、 Retinaディスプレイのユニットサイズが最初に参照ピクセルに変換されると仮定します サイズ （デバイスのピクセルで表されます）、ピクセル比で乗算されます。それが正しいか？

1.2.3ズーム

ズームインすると、表示される参照ピクセルサイズが大きくなり[ 4 ]、ディスプレイからの距離が大きくなります。これは非常に直感に反します。というのは、画面に近づくことなく、画面から「離れて」いるからです。

2.質問

私の疑問と明確な質問の結論：

  1. アンカーユニットが物理ユニットの場合、CSSピクセルサイズはどのように計算されますか？
  2. DPIと読み取り距離の関係の式を確立する方法は？
  3. プリンターやRetinaディスプレイなどの非標準の高DPI/PPIデバイスのCSSピクセルサイズの計算方法

また、私の推論が無効であるか、何かが足りない場合は修正してください。返信いただきありがとうございます。

3.参照

  1. W3C仕様
  2. inamidst.com、Sean B. Palmerのサイト
  3. モズジラハック
  4. 1uirksmode.org
csscss3screenpixelfrontend
54
Kuba Rakoczy

私は間違っているかもしれませんが、CSSピクセルが物理的な単位をアンカーとして持つことは不可能だと思います。

this 記事に基づく：

PxユニットはCSSの魔法のユニットです。現在のフォントとは関係がなく、絶対単位とは関係ありません。 px単位は小さくても見えるように定義されており、水平1px幅の線を鋭いエッジで表示できます（アンチエイリアスなし）。シャープで小さくて見えるものは、デバイスとその使用方法によって異なります。携帯電話のように目の近くに、腕の長さで、コンピューターのモニターのように、または本のようにその中間に保持しますか？したがって、pxは一定の長さではなく、デバイスのタイプとその典型的な使用法に依存するものとして定義されます。

UPDATE：私は間違っていました。 可能 現在、どのブラウザにも実装されていません。実際にそうである場合、仕様に従って： "これらの寸法は、（i）物理的な単位を物理的な測定値に関連付けることによって固定されます"つまり、1pxは物理的なインチの1/96に相当します。

DPIとテーブル内の読み取り距離の関係については、DPI = 96の場合、読み取り距離は〜71cmまたは28inであり、これらの値は反比例DPIが高いほど、読み取り距離が短くなります。

それから、式を簡単に思い付くことができます：

x = 125/96

y = 71/x

where:
  x - ratio between second and first DPI value
  y - reading distance for second DPI value

高解像度のデバイスについては、Mozilla Hacksの記事で低い例を示します。

最も有名な例としてiPhone 4を取り上げましょう。 326 DPIディスプレイが付属しています。上記の表によると、スマートフォンとしての一般的な表示距離は16.8インチで、基準ピクセル密度は160 DPIです。 1つのCSSピクセルを作成するために、Appleはデバイスピクセル比を2に設定することを選択しました。これにより、iOS Safariは163 DPI電話と同じ方法でWebページを効果的に表示します。

つまり、物理（PPI）とCSS 1（cssppi）の2つの解像度があることを意味します。 cssppiは参照ピクセルサイズの計算に使用され、デバイスメーカーは1つのCSSピクセルにマッピングする参照ピクセルの量を選択しているようです（この数値はデバイスピクセル比の値に等しいが100％確かではないと仮定します）。

一般的なデバイスのピクセル比、PPI、およびcssppiを比較した表を次に示します。 http://mydevice.io/devices/

詳細および参照については、次の記事を参照してください。

7
Teo Dragovic