屏幕分辨率、設(shè)備像素和CSS像素這些術(shù)語，在很多語境下，是可互換的，但也因此容易在有差異的地方引起混淆，實(shí)際上它們是不同的概念。
屏幕分辨率和設(shè)備像素是物理概念，而CSS像素是WEB編程的概念；屏幕分辨率和設(shè)備像素的差別在于設(shè)備像素顯示密度。
當(dāng)設(shè)備屏幕ZOOM=100%的時(shí)候，瀏覽器CSS像素尺寸和設(shè)備像素相等，而當(dāng)像素密度(pixel density)為1的時(shí)候，屏幕分辨率和設(shè)備像素相等。
在響應(yīng)式設(shè)計(jì)中，使用了viewport,device-width,media query,width這些概念，web程序員需要準(zhǔn)確理解其中的細(xì)微差異。
media query來探測屏幕尺寸，device-width以設(shè)備像素計(jì)算屏幕寬度，width以CSS像素計(jì)量總的頁面寬度（在iPhone中，最小為980px）。
viewport指的是瀏覽器通過寬度比例來計(jì)算元素尺寸的一塊區(qū)域，通常比屏幕大一點(diǎn)。
而如下meta標(biāo)簽，將使得viewport區(qū)域適配于設(shè)備像素寬度（在iPhone中，一般為320px）。
<meta name="viewport" width="device-width">
在沒有使用meta標(biāo)簽前，頁面看起來是這樣的（計(jì)算元素尺寸時(shí)使用了較大的CSS像素寬度）：
而添加meta標(biāo)簽后，變?yōu)槿缦拢ㄓ?jì)算元素尺寸時(shí)使用了設(shè)備像素）：
蘋果iPhone4采用了新的顯示技術(shù)，宣稱640px的分辨率，但需要注意的是，其實(shí)際設(shè)備像素寬度仍然是320px，
有些設(shè)備在media query時(shí)返回的是屏幕分辨率而不是設(shè)備像素寬度，這些情況導(dǎo)致了網(wǎng)頁設(shè)計(jì)上的不一致。
Google引入了一個(gè)dips（device-independent pixels）的中間概念，web開發(fā)人員只需要處理DIPS，究竟屏幕能顯示多少內(nèi)容，而無需關(guān)心實(shí)際屏幕分辨率，這是好的技術(shù)方向，將有助于消除新的硬件顯示技術(shù)給media query編程帶來的混亂。
