在 Hacker News 上看到的舊文章,在「IN CSS, “PX” IS NOT AN ANGULAR MEASUREMENT AND IT IS NOT NON-LINEAR」這篇文章裡面,標題就直接提到「pixel 並非生而平等」...
文章裡的 pixel 的定義是:
a pixel is defined as the smallest object that can be displayed on a device
但我找不到這句話的出處...
到是 CSS 2.1 的 PDF 裡可以看到 px 的定義是:
px: pixel units — 1px is equal to 0.75pt.
以及 pt 的定義:
pt: points — the points used by CSS are equal to 1/72nd of 1in.
而連 in 都有定義:
in: inches — 1in is equal to 2.54cm.
然後 cm 這個縮寫定義到公制:
cm: centimeters
看起來不像是有問題啊?另外是還有對 reference pixel 的定義,看起來也很明確啊:
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).
暫時不考慮這個問題... 有機會再回頭來看好了 @_@
現實中實作用的定義差很多啊. 一般而言是 Apple 先實作, 然後 Android/Chrome 跟著模仿^H^H維持相容性.
Physical Pixel: 這個定義沒有疑問, 就是 LCD panel 上面的一組格子.
Device Independent Pixel(DIP): 1 DIP = 1 PP * device_scale_factor. Device scale factor 是根據不同的 hardware display. 一般而言 PC 是用 1, 不管實際螢幕解析度如何. 少數的例外是 Macbook with Retina Display 還有 Chromebook Pixel 用的值是 2. 市面上其他的高清主機可預見的是字都會變很小... 另在 mobile 上面 iPhone 3GS 以前用 1, iPhone 4 以後用 2 (retina display). Android 的值不一定, 基本是希望字維持在一個看得清楚的大小. 這個值可以不是整數, 許多 HDPI device 用的值就是 1.5. 其中一個特別惡名昭彰的是 Nexus 7 用的是 1.325 (not even a machine number!).
CSS Pixel: 1px = transform(1) * page_scale_factor * DIP, 換句話說, 在沒有縮放跟 transform 的情形下, CSS Pixel 是以 DIP 為準.
inch 跟 centimeter 的實作我不確定, 要看 source code.
你貼的定義應該是從傳統 Windows 實作衍生來的. 在螢幕上顯示的時候如果用 small font (default) 固定是 1px = 0.75pt. 這也是細明體或 Fixedsys 用 12pt 可以叫出經典 8x16 點陣字的由來. (但是 Gnome 採用標準定義, 它會從 EDID 抓螢幕實體大小算出 1pt = 1/72 in, 不過這很蠢, 如果雙螢幕解析度不一樣它要怎麼實作?)
在印刷上沒有疑問, 1pt = 1/72 in, 不管是 Microsoft 還是 Apple 還是 Adobe 都是用一樣標準.
CSS px 因為一些歷史因素最後定義是某個距離下眼睛看起來是某個大小的點(原文下面有張圖),但是這個點不可能在每個 device 上都剛好是螢幕像素的整數倍,所以就...XD
文件/圖片列印是固定比值,但是螢幕顯示就不一定了,像現在的 Mobile devices 螢幕規格就會提到 PPI(Pixels Per Inch)。
我在 Mozilla Hacks 寫過一篇 CSS length 的介紹:
https://hacks.mozilla.org/2013/09/css-length-explained/