版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。 http://blog.csdn.net/zhouziyu2011/article/details/70176511

1、物理像素

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

2、邏輯像素

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

3、像素比

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

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

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

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

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

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

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

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

深入研究：http://blog.csdn.net/aiolos1111/article/details/51967744