物理像素、邏輯像素、CSS像素、PPI、設備像素比是什麼【前端劍指offer第5期】

# 提問

物理像素、邏輯像素、CSS像素、PPI、設備像素比是什麼？

# 回答

物理像素代表屏幕上有多少個點，比如1080x2340表示屏幕一排包含1080個物理像素點。

邏輯像素表示屏幕展示物體的視覺尺寸是多少。邏輯像素相同表示物體看起來或者列印出來大小一樣，物理像素點越小，一個邏輯像素包含點物理像素點就越多，看起來就越清晰。

一般情況下CSS像素等同於邏輯像素，但瀏覽器可以放大，手機也有放大模式，此時就不再相等。

PPI是屏幕對角線的物理像素的個數除以對角線英寸數。

設備像素比是在水平或者垂直方向，在同一排一個邏輯像素能放幾個物理像素。

# 解析

物理像素也稱為設備像素，屏幕的最小物理單位。需要注意的是一個像素並不一定是一個小正方形區塊，也沒有標準的寬高，只是用於顯示豐富色彩的一個「點」而已。可以參考公園裡的景觀變色彩燈，一個彩燈(物理像素)由紅、藍、綠小燈組成，三盞小燈不同的亮度混合出各種色彩。比如當我們打開Iphone12的官網，產品參數裡「2340 x 1080 像素解析度」指的就是設備像素，表示屏幕水平有1080個點，垂直有2340個點。背景故事：關注手機配置的同學會聽到華為P40排列用的是「周冬雨排列」（上圖右上角），顯示效果沒有三星屏的排列好。之所以國產屏用這種奇怪的排列方式，是因為起步晚其他排列早被其他廠商申請了專利。邏輯像素也稱作設備獨立像素。比如我們偶爾會說「電腦屏幕在 2560x1600解析度下字太小了，我們把它調為 1440x900」，這裡的「解析度」（非嚴謹說法）指的就是設備獨立像素。可以通過 window.screen.width/ window.screen.height 查看。另外，平時我們所說的 iphone12mini的邏輯像素是375 x 812，iPhone12 Pro Max的的邏輯像素是400 x 880。一個設備獨立像素裡可能包含1個或者多個物理像素點，包含的越多則屏幕看起來越清晰。僅需要物理像素難道不夠嗎？為什麼要有邏輯像素呢？因為物理像素僅代表像素點的個數，並沒有有規定一個點實際的尺寸是多少。假設有一個按鈕，寬度用100個物理像素表示，因屏幕物理像素排列方式和密度的差異，不同屏幕上實際的視覺寬度必然不一樣。而邏輯像素相同就表示希望按鈕在不同屏幕上看起來一樣大。
PPI (pix per inch)每英寸的物理像素數。以尺寸為5.4英寸（屏幕對角線長度）、解析度為1080 x 2340的iPhone12 mini為例， ppi = Math.sqrt(1080*1080 + 2340*2340) / 5.4 ，值為 476PPI。CSS像素瀏覽器使用的單位，用來精確度量網頁上的內容，比如 div { width: 100px; }。在一般情況下（頁面縮放比為1），1個CSS像素 等於 1個設備獨立像素。比如，假設把屏幕獨立像素解析度設置為1440x900，給頁面元素設置為寬度720px，則視覺上元素的寬度是屏幕寬度的一半。這也解釋了為什麼當我們把獨立像素解析度調高后網頁的文字感覺變小了。當頁面縮放比不為1時，CSS像素和設備獨立像素不再對應。比如當頁面放大200%，則1個CSS像素等於4個設備獨立像素。設備像素比設備像素比(DevicePixelRatio)指的是設備物理像素和邏輯像素（device-independent pixels, dips）的比例 。比如iPhone12 mini的DPR是3。