設備像素 (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

總結

以上是生活随笔為你收集整理的css 获取屏幕宽度_设备像素、设备独立像素、CSS像素、分辨率、PPI、devicePixelRatio 的区别...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。