卡頌什麼是三倍圖？——移動端尺寸知識入門

https://zhuanlan.zhihu.com/p/34988701

裝置畫素、裝置獨立畫素、CSS畫素、解析度、PPI、devicePixelRatio 的區別

轉載https://zhuanlan.zhihu.com/p/68563760

裝置畫素 (device pixels)

也稱為物理畫素，顯示器的最小物理單位。這裡需要注意，一個畫素並不一定是一個小正方形區塊，也沒有標準的寬高，只是用於顯示豐富色彩的一個“點”而已。可以參考公園裡的景觀變色彩燈，一個彩燈(物理畫素)由紅、藍、綠小燈組成，三盞小燈不同的亮度混合出各種色彩。

裝置獨立畫素(device independent pixels)

獨立於裝置的畫素。比如我們偶爾會說“電腦螢幕在 2560x1600解析度下不適合玩遊戲，我們把它調為 1440x900”，這裡的“解析度”（非嚴謹說法）指的就是裝置獨立畫素。可以通過 window.screen.width/ window.screen.height 檢視。 另外，平時我們所說的 iphoneX的邏輯解析度375 x 812指的就是裝置獨立畫素。chrome檢查元素模擬除錯手機裝置時顯示如375x667和320x480都是裝置獨立畫素。

一個裝置獨立畫素裡可能包含1個或者多個物理畫素點，包含的越多則螢幕看起來越清晰。

畫素解析度

以手機螢幕為例，iphonex畫素解析度為1125x2436，是指螢幕橫向能顯示1125個物理畫素點，縱向能顯示2436個物理畫素點。通常說的4K顯示屏指的是 4096x2160。

PPI (pix per inch)

每英寸的物理畫素數。以尺寸為5.8英寸（螢幕對角線長度）、解析度為1125x2436的iphonex為例，ppi = Math.sqrt(1125*1125 + 2436*2436) / 5.8，值為 463ppi

CSS畫素

瀏覽器使用的單位，用來精確度量網頁上的內容，比如div { width: 100px; }。 在一般情況下（頁面縮放比為1），1個CSS畫素 等於 1個裝置獨立畫素。比如，假設把螢幕獨立畫素解析度設定為1440x900，給頁面元素設定為寬度720px，則視覺上元素的寬度是螢幕寬度的一半。這也解釋了為什麼當我們把獨立畫素解析度調高後網頁的文字感覺變小了。

當頁面縮放比不為1時，CSS畫素和裝置獨立畫素不再對應。比如當頁面放大200%，則1個CSS畫素等於4個裝置獨立畫素。

devicePixelRatio

window.devicePixelRatio指的是裝置物理畫素和裝置獨立畫素（device-independent pixels, dips）的比例。window.devicePixelRatio = 物理畫素 / 裝置獨立畫素（dips）。經計算， iphone x的 devicePixelRatio 是3。

尺寸的區別

獲取螢幕尺寸（裝置獨立畫素值）：

screen.width
screen.height

獲取視窗尺寸（css畫素）：

包含滾動條

window.innerWidth
window.innerHeight

不包含滾動條

document.documentElement.clientWidth
document.documentElement.clientHeight 

獲取html元素尺寸（內容）：

document.documentElement.offsetWidth 
document.documentElement.offsetHight