1、物理像素

設(shè)備像素，在同一個(gè)設(shè)備上，它的物理像素是固定的，這是廠商在出廠時(shí)就設(shè)置好了的，即一個(gè)設(shè)備的分辨率是固定的。

2、邏輯像素

CSS像素，viewport中的一個(gè)小方格，CSS樣式代碼中使用的是邏輯像素。如果在一個(gè)設(shè)備中，物理像素與邏輯像素相等，將不會(huì)產(chǎn)生任何問(wèn)題。但是，在iphone 4中，物理像素是640px960px，而邏輯像素?cái)?shù)為320480px。因此，需要使用大約4個(gè)物理像素來(lái)顯示一個(gè)CSS像素。

3、像素比

物理像素與邏輯像素之間的比例。當(dāng)像素比為1:1時(shí)，使用1個(gè)物理像素顯示1個(gè)邏輯像素；當(dāng)像素比為2:1時(shí)，使用4個(gè)物理像素顯示1個(gè)邏輯像素。

4、CSS中的1px并不等于設(shè)備的1px

在CSS中一般使用px作為單位，在Web瀏覽器中CSS的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素，這可能會(huì)造成一個(gè)錯(cuò)覺(jué)，那就是CSS中的像素就是設(shè)備的物理像素。但實(shí)際情況卻并非如此，CSS中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，CSS中的1px所代表的設(shè)備物理像素是不同的。

在早先的移動(dòng)設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320480，在iphone3上，1個(gè)CSS像素確實(shí)是等于1個(gè)物理像素的。后來(lái)隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的像素越來(lái)越高，從iphone4開(kāi)始，推出了所謂的Retina屏，分辨率提高了一倍，變成640960，但屏幕尺寸卻沒(méi)變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時(shí)，1個(gè)CSS像素是等于4個(gè)物理像素的。

5、實(shí)現(xiàn)真正的1物理像素

當(dāng)viewport的屬性initial-scale為1時(shí)，頁(yè)面大小正常，但initial-scale為0.5時(shí)，頁(yè)面被縮小了1倍，像素比為2:1的設(shè)備本來(lái)1個(gè)CSS像素寬度占2個(gè)物理像素寬度，縮小后的1個(gè)CSS像素寬度就只占1個(gè)物理像素，即實(shí)現(xiàn)了真正的1物理像素。

eg：border-width:1px并不是最小邊框，瀏覽器可以顯示的最小粒度比1px還要小。為什么會(huì)出現(xiàn)比border-width:1px更細(xì)的邊框？

屏幕能夠顯示的最小粒度是1個(gè)物理像素，iPhone4的像素比為2，設(shè)置border-width:1px后，邊框占了4個(gè)物理像素，如果能讓邊框的寬度為1物理像素，那么它就比1個(gè)CSS像素要細(xì)，這可以通過(guò)設(shè)置<meta name="viewport" content="width=device-width, initial-scale=0.5">。（轉(zhuǎn)載）