摘要：根據(jù)上面的圖片，安卓手機(jī)，屬于，轉(zhuǎn)換系數(shù)是因此這臺(tái)手機(jī)中，個(gè)像素物理像素。這個(gè)轉(zhuǎn)換系數(shù)，也等同于，設(shè)備像素比。

一個(gè)像素里復(fù)雜紛擾的世界

文 | 啃先生 Mar.3rd.2016 首發(fā)于微信公眾號(hào)（啃先生）

上一篇發(fā)了《【移動(dòng)適配】移動(dòng)Web怎么做屏幕適配》，現(xiàn)在繼續(xù)。

在CSS的世界里Px是原子操作，我們無法定義邊框的寬度是0.5px，最小都是1px。所以有以下結(jié)論：

然而，對(duì)于精益求精的產(chǎn)品而言，這種認(rèn)識(shí)只是片面的！例如：我做了一個(gè)頁面，上面只有兩條邊框，在高清屏（如iPhone5s）上，經(jīng)過特殊處理的邊框比1像素的邊框還要細(xì)。

因此，在高清屏上，border-width:1px;并不是最小邊框。瀏覽器可以顯示的最小粒度比CSS中的1px還要小。

那么CSS中的1px是什么？瀏覽器是怎么渲染它的？

網(wǎng)頁在一個(gè)叫viewport的東西里渲染，可以理解為畫布，畫布被分成 N x M 個(gè)小方格，1個(gè)CSS像素，就是其中的一個(gè)小方格。

viewport又是什么？

網(wǎng)頁在viewport上渲染，可以想像在PS上畫東西時(shí)，上面也有個(gè)畫布，這個(gè)畫布分割了 N x M 個(gè)方格，N是它的寬度，M是它的高度。寬高都可以任意設(shè)置，所以說viewport是虛擬的。假設(shè)設(shè)置寬度是400，那么瀏覽器顯示區(qū)域的橫向?qū)⒈环譃?00份，CSS的1px占的寬度就是顯示區(qū)域的 1/400。如果是980，那就是1/980。

viewport值不一樣時(shí)，對(duì)頁面元素寬度的影響

看一個(gè)的頁面，不動(dòng)任何其他代碼，只修改viewport的寬度，頁面發(fā)生了什么變化

代碼如下：

以下是運(yùn)行結(jié)果

viewport=500的情況

viewport=900的情況

我們只分析用戶頭像的圖片，已知頭像寬度是50px。

當(dāng)viewport寬度為500時(shí)，屏幕橫向被分為500份，每份1px，所以頭像寬度是屏幕的1/10。（500/50=10）

當(dāng)viewport寬度為900時(shí)，屏幕橫向被分為900份，每份1px，所以頭像寬度是屏幕的1/8。 （900/50=18）

所以，在CSS中，1px是指viewport中的一個(gè)小方格，而viewport寬度是可以任意設(shè)置的。

那么，怎么合理設(shè)置viewport的寬度？
viewport的寬度可以是數(shù)字和字符串"device-width"。device-width指設(shè)備寬度。

當(dāng)取值為數(shù)字時(shí)，指不論是什么手機(jī)屏幕，viewport都被分為那么多份

當(dāng)取值為device-width時(shí)，指的是手機(jī)屏幕的viewport寬度被設(shè)置為跟手機(jī)寬度一樣。那這個(gè)寬度怎么算的呢？

device-width的算法

先理清幾個(gè)非常關(guān)鍵的術(shù)語概念：

物理像素：買手機(jī)的時(shí)候會(huì)有一個(gè) nm 的分辨率，那是屏幕的nm個(gè)呈像的點(diǎn)，一個(gè)點(diǎn)（小方格）為一個(gè)物理像素。它是屏幕能顯示的最小粒度

CSS像素：就是CSS里的Px，上面已經(jīng)講了是viewport中的一個(gè)小方格。

像素密度：即dpi或ppi，屏幕每英寸所占的物理像素點(diǎn)。

而CSS像素與物理像素之間是有一個(gè)轉(zhuǎn)換關(guān)系的。即是：

其中，轉(zhuǎn)換系數(shù)計(jì)算過程如下：

安卓的密度區(qū)域和轉(zhuǎn)化系數(shù)的對(duì)應(yīng)表

iPhone的密度區(qū)域和轉(zhuǎn)化系數(shù)的對(duì)應(yīng)表
(聲明：以上三個(gè)圖片來源于 http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml)

例如：某臺(tái)安卓手機(jī)，分辨率是 1920*1080，屏幕對(duì)象線是5英寸。那么在這臺(tái)手機(jī)上1個(gè)CSS像素，占了多少個(gè)物理像素？

第一步：勾股定理算出對(duì)角線的分辨率，即 √(19202+10802)≈2203px

第二步：算出dpi。對(duì)角線的分辨率/對(duì)角線英寸 = 2203/5≈440dpi

第三步：得出轉(zhuǎn)換系數(shù)。根據(jù)上面的圖片，安卓手機(jī)440dpi，屬于XXHDPI，轉(zhuǎn)換系數(shù)是3

因此這臺(tái)手機(jī)中，1個(gè)CSS像素 = 3*物理像素。即1個(gè)CSS像素占了3個(gè)物理像素。

這個(gè)轉(zhuǎn)換系數(shù)，也等同于dpr，設(shè)備像素比。

因?yàn)楹苊黠@device-width的寬度值單位是CSS像素。所以當(dāng)viewport設(shè)置為device-width時(shí)，此時(shí)它是手機(jī)橫向分辨率 / 轉(zhuǎn)換系數(shù)。即：

例如上述的例子中，該臺(tái)安卓手機(jī)的device-width是1080/3 = 360，即viewport的寬度是 360 CSS像素。
而viewport設(shè)置為固定的數(shù)字有可能會(huì)破壞這種轉(zhuǎn)換關(guān)系，都是建議設(shè)置viewport寬度為device-width，這樣1個(gè)CSS像素就盡最大可能剛好占dpr個(gè)物理像素點(diǎn)。

為什么會(huì)出現(xiàn)比border-width:1px更細(xì)的邊框？

屏幕能夠顯示的最小粒度是1個(gè)物理像素，而當(dāng)viewport寬度設(shè)置為device-width時(shí)，1個(gè)CSS像素占用的物理像素是由轉(zhuǎn)換系數(shù)決定的。所以，像iPhone6這樣的高清屏上，轉(zhuǎn)換系數(shù)為3，border-width:1px，這個(gè)邊框占了3個(gè)物理像素。如果能讓某個(gè)border的寬度為1個(gè)物理像素，那么它就比1個(gè)CSS像素要細(xì)，而本文最開始邊框那個(gè)更細(xì)是因?yàn)?strong>經(jīng)過特殊處理后使其只占用1個(gè)物理像素。

讓1個(gè)CSS像素占用一個(gè)物理像素的辦法。

方法一：viewport的scale

在viewport的屬性里，除了設(shè)置寬高的width和height外，還有縮放比例scale。
當(dāng)scale為1時(shí)，頁面大小正常，但scale為0.5時(shí)，頁面被縮小了1倍，本來1個(gè)CSS像素寬度占2個(gè)物理像素寬度，縮小后的border-width:1px就只占1個(gè)物理像素。代碼如下：

其中，initial-scale為1/dpr。

優(yōu)點(diǎn)：

不用為border寫很多樣式代碼，跟原來一樣border:1px solid #D5D5D6即可

可以輕松設(shè)置圓角 border-radius。

缺點(diǎn)：
整個(gè)頁面縮小了，副作用就是字體，圖片，其他元素的尺寸邊距等等都同比例縮小了。這種情況，設(shè)置viewport為dpr*document.documentElment.clientWidth，再結(jié)合我上一篇文章《【移動(dòng)適配】移動(dòng)Web怎么做屏幕適配（一）》，即可解決。

方法二：transform scale

方法一是縮放整個(gè)頁面，在CSS3標(biāo)準(zhǔn)里，可以縮放某個(gè)元素。例如某個(gè)div.border-top，為它設(shè)置如下樣式，使該DIV的頂部有一個(gè)邊框

.border-top{position: relative;border-top: none !important;}
.border-top:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #D5D5D6;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

在該DIV后面添加一個(gè)高度為1px的內(nèi)容，并且縮小dpr倍，這里就是縮小成原來的1/2。
優(yōu)點(diǎn)是整個(gè)頁面不用縮放，缺點(diǎn)是border代碼較多，無法實(shí)現(xiàn)border-radius圓角

寫完瀕臨虛脫。。

深入理解viewport和px（http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml）

A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）

適配的問題還沒講完，但又臭又長(zhǎng)的純技術(shù)文太硬了，下期可能會(huì)喝點(diǎn)湯，講講故事。

開始碼字才知道碼字不易，堅(jiān)持碼字更不易。轉(zhuǎn)載請(qǐng)聲明來源