CSS像素、物理像素、邏輯像素、設(shè)備像素比、PPI、Viewport

文章來源：https://github.com/jawil/blog/issues/21

1、PX(CSS pixels)

1.1 定義

虛擬像素，可以理解為“直覺”像素，CSS和JS使用的抽象單位，瀏覽器內(nèi)的一切長(zhǎng)度都是以CSS像素為單位的，CSS像素的單位是px。

1.2 注意

在CSS規(guī)范中，長(zhǎng)度單位可以分為兩類，絕對(duì)(absolute)單位以及相對(duì)(relative)單位。px是一個(gè)相對(duì)單位，相對(duì)的是設(shè)備像素(device pixel)。

在同樣一個(gè)設(shè)備上，每1個(gè)CSS像素所代表的物理像素是可以變化的(即CSS像素的第一方面的相對(duì)性); 

在不同的設(shè)備之間，每1個(gè)CSS像素所代表的物理像素是可以變化的(即CSS像素的第二方面的相對(duì)性);

1.3 那么PX到底是什么？

px實(shí)際是pixel（像素）的縮寫，根據(jù) 維基百科的解釋，它是圖像顯示的基本單元，既不是一個(gè)確定的物理量，也不是一個(gè)點(diǎn)或者小方塊，而是一個(gè)抽象概念。所以在談?wù)撓袼貢r(shí)一定要清楚它的上下文！一定要清楚它的上下文！一定要清楚它的上下文！

不同的設(shè)備，圖像基本采樣單元是不同的，顯示器上的物理像素等于顯示器的點(diǎn)距，而打印機(jī)的物理像素等于打印機(jī)的墨點(diǎn)。而衡量點(diǎn)距大小和打印機(jī)墨點(diǎn)大小的單位分別稱為ppi和dpi：

ppi：每英寸多少像素?cái)?shù)，放到顯示器上說的是每英寸多少物理像素及顯示器設(shè)備的點(diǎn)距。

dpi：每英寸多少點(diǎn)。

關(guān)于打印機(jī)的點(diǎn)距我們不去關(guān)心，只要知道 當(dāng)用于描述顯示器設(shè)備時(shí)ppi與dpi是同一個(gè)概念 。

1.4 CSS像素的真正含義

由于不同的物理設(shè)備的物理像素的大小是不一樣的，所以css認(rèn)為瀏覽器應(yīng)該對(duì)css中的像素進(jìn)行調(diào)節(jié)，使得瀏覽器中 1css像素的大小在不同物理設(shè)備上看上去大小總是差不多 ，目的是為了保證閱讀體驗(yàn)一致。為了達(dá)到這一點(diǎn)瀏覽器可以直接按照設(shè)備的物理像素大小進(jìn)行換算，而css規(guī)范中使用**"參考像素"**來進(jìn)行換算。

1參考像素即為從一臂之遙看解析度為96DPI的設(shè)備輸出（即1英寸96點(diǎn)）時(shí)，1點(diǎn)（即1/96英寸）的視角。它并不是1/96英寸長(zhǎng)度，而是從一臂之遙的距離處看解析度為96DPI的設(shè)備輸出一單位（即1/96英寸）時(shí)視線與水平線的夾角。通常認(rèn)為常人臂長(zhǎng)為28英寸，所以它的視角是:
(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

由于css像素是一個(gè)視角單位，所以在真正實(shí)現(xiàn)時(shí)，為了方便基本都是根據(jù)設(shè)備像素換算的。瀏覽器根據(jù)硬件設(shè)備能夠直接獲取css像素

1.5 舉個(gè)栗子來理解css像素的相對(duì)性

作為Web開發(fā)者，我們接觸的更多的是用于控制元素樣式的樣式單位像素。這里的像素我們稱之為CSS像素。

CSS像素有什么特別的地方？我們可以借用quirksmode中的這個(gè)例子：

假設(shè)我們用PC瀏覽器打開一個(gè)頁(yè)面，瀏覽器此時(shí)的寬度為800px，頁(yè)面上同時(shí)有一個(gè)400px寬的塊級(jí)元素容器。很明顯此時(shí)塊狀容器應(yīng)該占頁(yè)面的一半。

但如果我們把頁(yè)面放大（通過“Ctrl鍵”加上“+號(hào)鍵”），放大為200%，也就是原來的兩倍。此時(shí)塊狀容器則橫向占滿了整個(gè)瀏覽器。

吊詭的是此時(shí)我們既沒有調(diào)整瀏覽器窗口大小，也沒有改變塊狀元素的css寬度，但是它看上去卻變大了一倍——這是因?yàn)槲覀儼袰SS像素放大為了原來的兩倍。

CSS像素與屏幕像素1：1同樣大小時(shí)：

CSS像素(黑色邊框)開始被拉伸，此時(shí)1個(gè)CSS像素大于1個(gè)屏幕像素

也就是說默認(rèn)情況下一個(gè)CSS像素應(yīng)該是等于一個(gè)物理像素的寬度的，但是瀏覽器的放大操作讓一個(gè)CSS像素等于了兩個(gè)設(shè)備像素寬度。在后面你會(huì)看到更復(fù)雜的情況，在高PPI的設(shè)備上，CSS像素甚至在默認(rèn)狀態(tài)下就相當(dāng)于多個(gè)物理像素的尺寸。

從上面的例子可以看出，CSS像素從來都只是一個(gè)相對(duì)值。

2、DP(device pixels)

2.1 定義

設(shè)備像素（物理像素），顧名思義，顯示屏是由一個(gè)個(gè)物理像素點(diǎn)組成的，通過控制每個(gè)像素點(diǎn)的顏色，使屏幕顯示出不同的圖像，屏幕從工廠出來那天起，它上面的物理像素點(diǎn)就固定不變了，單位pt。

2.2 注意

pt在css單位中屬于真正的絕對(duì)單位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米。

不同的設(shè)備，其圖像基本單位是不同的，比如顯示器的點(diǎn)距，可以認(rèn)為是顯示器的物理像素?，F(xiàn)在的液晶顯示器的點(diǎn)距一般在0.25mm到0.29mm之間。而打印機(jī)的墨點(diǎn)，也可以認(rèn)為是打印機(jī)的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。

注意，我們通常所說的顯示器分辨率，其實(shí)是指桌面設(shè)定的分辨率，而不是顯示器的物理分辨率。只不過現(xiàn)在液晶顯示器成為主流，由于液晶的顯示原理與CRT不同，只有在桌面分辨率與物理分辨率一致的情況下，顯示效果最佳，所以現(xiàn)在我們的桌面分辨率幾乎總是與顯示器的物理分辨率一致了。

2.3 小知識(shí)

小知識(shí):屏幕普遍采用RGB色域(紅、綠、藍(lán)三個(gè)子像素構(gòu)成),而印刷行業(yè)普遍使用CMYK色域(青、品紅、黃和黑)

2.4 設(shè)備像素(DP)與CSS像素之間的關(guān)系

獲得設(shè)備像素比（dpr）后，便可得知設(shè)備像素與CSS像素之間的比例。當(dāng)這個(gè)比率為1:1時(shí)，使用1個(gè)設(shè)備像素顯示1個(gè)CSS像素。當(dāng)這個(gè)比率為2:1時(shí)，使用4個(gè)設(shè)備像素顯示1個(gè)CSS像素，當(dāng)這個(gè)比率為3:1時(shí)，使用9（3*3）個(gè)設(shè)備像素顯示1個(gè)CSS像素。
所以，有如下公式：

DPR = 設(shè)備像素/CSS像素

3、DIP(Device independent Pixel)

設(shè)備獨(dú)立像素，也稱為邏輯像素，簡(jiǎn)稱dip。
根據(jù)上述設(shè)備像素與CSS像素之間的關(guān)系、及DPR的官方定義，我們可以推斷出：

CSS像素 =設(shè)備獨(dú)立像素 = 邏輯像素

下面，還是引用 http://www.cnblogs.com/2050/p/3877280.html 文中的內(nèi)容說明：

在移動(dòng)端瀏覽器中以及某些桌面瀏覽器中，window對(duì)象有一個(gè)devicePixelRatio屬性，它的官方的定義為：設(shè)備物理像素和設(shè)備獨(dú)立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨(dú)立像素。
CSS像素就可以看做是設(shè)備的獨(dú)立像素，所以通過devicePixelRatio，我們可以知道該設(shè)備上一個(gè)css像素代表多少個(gè)物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個(gè)css像素相當(dāng)于2個(gè)物理像素。但是要注意的是，devicePixelRato在不同的瀏覽器中還存在些許的兼容性問題，所以我們現(xiàn)在還并不能完全信賴這個(gè)東西，具體的情況可以看下這篇文章。

為什么是“每四個(gè)一組”？而且要讓這四個(gè)一組來顯示“原來屏幕的一個(gè)像素”？這大概就是 Retina 顯示技術(shù)的一種表現(xiàn)吧。而這“每四個(gè)一組”的“大像素”，可以被稱作“設(shè)備獨(dú)立像素”，device independent pixel ，或者 density-independentpixel ，它可以是系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。

“設(shè)備獨(dú)立像素”也有人稱為“CSS像素”，一種形象的說法，更傾向于表明與 CSS 中尺寸的對(duì)應(yīng)。

設(shè)備獨(dú)立像素與物理像素的對(duì)應(yīng)關(guān)系，可以這樣看：

類似的每四個(gè)一組的對(duì)應(yīng)關(guān)系，也許正是 Retina 顯示技術(shù)所做的。

4、DPR(device pixels ratio)

4.1 定義

設(shè)備像素比（dpr 描述的是未縮放狀態(tài)下，物理像素和CSS像素的初始比例關(guān)系，計(jì)算方法如下圖。

4.2 理解

設(shè)備像素比(dpr) 是指在移動(dòng)開發(fā)中1個(gè)css像素占用多少設(shè)備像素，如2代表1個(gè)css像素用2x2個(gè)設(shè)備像素來繪制。

設(shè)備像素比(dpr)，公式為1px = (dpr)^2 * 1dp，可以理解為1px由多少個(gè)設(shè)備像素組成；

5、PPI(pixels per inch)

5.1 定義

每英寸像素取值，更確切的說法應(yīng)該是像素密度，也就是衡量單位物理面積內(nèi)擁有像素值的情況。

5.2 ppi是如何計(jì)算出來的呢？

顧名思義，每英寸的像素點(diǎn)（設(shè)備像素），已知屏幕分辨率和主對(duì)角線的尺寸，則ppi等于
以愛瘋6為例：

    var 斜邊尺寸 = V(1920^2+1080^2) V代表開根號(hào) 
var ppi = 斜邊尺寸/5.5 
ppi = 401ppi
  

我們知道，ppi越高，每英寸像素點(diǎn)越多，圖像越清晰；我們可以類比物體的密度，密度越大，單位體積的質(zhì)量就越大，ppi越高，單位面積的像素越多。

5.3 ppi和dpr到底什么關(guān)系？

畢竟這些參數(shù)是外國(guó)人先發(fā)明的，他們會(huì)優(yōu)先選擇自己熟悉的計(jì)量單位作為顯示設(shè)備的工廠標(biāo)準(zhǔn)參數(shù)，因此ppi就用作顯示設(shè)備的工業(yè)標(biāo)準(zhǔn)；

告訴業(yè)界人士，ppi達(dá)到多少是高清屏，此時(shí)對(duì)應(yīng)的dpr是多少，而不直接告訴你我現(xiàn)在的顯示設(shè)備dpr是多少，畢竟人們直接聽到像素分辨率會(huì)更加有反應(yīng)。

設(shè)備像素比與ppi相關(guān)，一般是ppi/160的整數(shù)倍：

6、倍率與邏輯像素

6.1 基本關(guān)系

用iPhone 3gs和4s來舉例。假設(shè)有個(gè)郵件列表界面，我們不妨按照PC端網(wǎng)頁(yè)設(shè)計(jì)的思維來想象。3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會(huì)變得特別寬。但兩款手機(jī)其實(shí)是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會(huì)小到根本看不清字。

在現(xiàn)實(shí)中，這兩者效果卻是一樣的。這是因?yàn)镽etina屏幕把2x2個(gè)像素當(dāng)1個(gè)像素使用。比如原本44像素高的頂部導(dǎo)航欄，在Retina屏上用了88個(gè)像素的高度來顯示。導(dǎo)致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質(zhì)卻更清晰。

在以前，iOS應(yīng)用的資源圖片中，同一張圖通常有兩個(gè)尺寸。你會(huì)看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片準(zhǔn)備好，iOS會(huì)自己判斷用哪張，Android道理也一樣。

由此可以看出，蘋果以普通屏為基準(zhǔn)，給Retina屏定義了一個(gè)2倍的倍率（iPhone 6plus除外，它達(dá)到了3倍）。實(shí)際像素除以倍率，就得到邏輯像素尺寸。只要兩個(gè)屏幕邏輯像素相同，它們的顯示效果就是相同的。

6.2 Retina顯示屏

這是一種顯示技術(shù)，可以將把更多的像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度，這種分辨率在正常觀看距離下足以使人肉眼無(wú)法分辨其中的單獨(dú)像素。

最先使用retina屏幕是iphone 4，屏幕分辨率為960 * 640（326ppi）。

對(duì)比如下兩幅圖，可以清晰地看出是否 Retina 屏的顯示差異：

圖2 iPhone 3GS

圖3 iPhone 4

兩代iPhone 的物理尺寸（屏幕寬高有多少英寸）是一樣的，從上圖可以看出，iphone 4的顯示效果要明顯好于iphone 3GS，雖然 iPhone 4 分辨率提高了，但它不同于普通的電腦顯示器那樣為了顯示更多的內(nèi)容，而是提升顯示相同內(nèi)容時(shí)的畫面精細(xì)程度。這種提升方式是靠提升單位面積屏幕的像素?cái)?shù)量，即像素密度來提升分辨率，這樣做的主要目的是為了提高屏幕顯示畫面的精細(xì)程度。以第三代 MacBook Pro with Retina Display為例， 工作時(shí)顯卡渲染出的2880x1880個(gè)像素每四個(gè)一組，輸出原來屏幕的一個(gè)像素顯示的大小區(qū)域內(nèi)的圖像。這樣一來，用戶所看到的圖標(biāo)與文字的大小與原來的1440x900分辨率顯示屏相同，但精細(xì)度是原來的4倍。

注意：在桌面顯示器中，我們調(diào)整了顯示分辨率，比如從 800 * 600 調(diào)整到 1024 * 768 時(shí)，屏幕的文字圖標(biāo)會(huì)變小，顯示的內(nèi)容更多了。但 Retina 顯示方式不會(huì)產(chǎn)生這樣的問題，或者說， Retina 顯示技術(shù)解決的是顯示畫面精細(xì)程度的問題，而不是解決顯示內(nèi)容容量的問題。

7、分辨率、像素和屏幕尺寸

PPI 說的是像素密度，而分辨率說的是塊屏幕的像素尺寸，譬如說 1334*750 就是 iPhone（6~7）的分辨率，說 iPhone（6~7）的分辨率是 326 是錯(cuò)誤的表述，326 是它的像素密度，單位是 PPI。

詢問別人一粒像素有多大是一個(gè)非常雞賊的問題（小心面試遇到這樣的題），雖然我們說像素是構(gòu)成屏幕的發(fā)光的點(diǎn)，是物理的，但是像素在脫離了屏幕尺寸之后是沒有大小可言的，你可以將 1920 * 1080 顆像素放到一臺(tái) 40 寸的小米電視機(jī)里面，也可以將同樣多的像素全部塞到一臺(tái) 5.5 寸的 iPhone7 Plus 手機(jī)里面去，那么對(duì)于 40 寸的電視而言，每個(gè)像素顆粒當(dāng)然會(huì)大于 5.5 寸的手機(jī)的像素。

所以光看屏幕的分辨率對(duì)于設(shè)計(jì)師來說是不具備多少實(shí)際意義的，通過分辨率計(jì)算得出的像素密度（PPI）才是設(shè)計(jì)師要關(guān)心的問題，我們通過屏幕分辨率和屏幕尺寸就能計(jì)算出屏幕的像素密度的。

再次使用 iPhone（6~7）作為例子。我們知道該屏幕的橫向物理尺寸為 2.3 英寸 ，且橫向具有 750 顆像素，根據(jù)下面的公式，我們能夠算出 iPhone（6~7）的屏幕是 326 PPI，意為每寸存在 326 顆像素。

其實(shí)不論我們?cè)趺闯?，?jì)算得出來的像素密度（PPI）都會(huì)是這個(gè)數(shù)，寬存在像素除以寬物理長(zhǎng)度，高存在像素除以高物理長(zhǎng)度，得數(shù)都接近于 326。

8、Viewport

8.1 PPK的關(guān)于三個(gè)viewport的理論

ppk大神對(duì)于移動(dòng)設(shè)備上的viewport有著非常多的研究（第一篇，第二篇，第三篇），有興趣的同學(xué)可以去看一下，本文中有很多數(shù)據(jù)和觀點(diǎn)也是出自那里。ppk認(rèn)為，移動(dòng)設(shè)備上有三個(gè)viewport。

首先，移動(dòng)設(shè)備上的瀏覽器認(rèn)為自己必須能讓所有的網(wǎng)站都正常顯示，即使是那些不是為移動(dòng)設(shè)備設(shè)計(jì)的網(wǎng)站。但如果以瀏覽器的可視區(qū)域作為viewport的話，因?yàn)橐苿?dòng)設(shè)備的屏幕都不是很寬，所以那些為桌面瀏覽器設(shè)計(jì)的網(wǎng)站放到移動(dòng)設(shè)備上顯示時(shí)，必然會(huì)因?yàn)橐苿?dòng)設(shè)備的viewport太窄，而擠作一團(tuán)，甚至布局什么的都會(huì)亂掉。也許有人會(huì)問，現(xiàn)在不是有很多手機(jī)分辨率都非常大嗎，比如768x1024，或者1080x1920這樣，那這樣的手機(jī)用來顯示為桌面瀏覽器設(shè)計(jì)的網(wǎng)站是沒問題的吧？前面我們已經(jīng)說了，css中的1px并不是代表屏幕上的1px，你分辨率越大，css中1px代表的物理像素就越多，devicePixelRatio的值也越大，這很好理解，因?yàn)槟惴直媛试龃罅?，但屏幕尺寸并沒有變大多少，必須讓css中的1px代表更多的物理像素，才能讓1px的東西在屏幕上的大小與那些低分辨率的設(shè)備差不多，不然就會(huì)因?yàn)樘《床磺濉Ｋ栽?080x1920這樣的設(shè)備上，在默認(rèn)情況下，也許你只要把一個(gè)div的寬度設(shè)為300多px（視devicePixelRatio的值而定），就是滿屏的寬度了。回到正題上來，如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話，某些網(wǎng)站就會(huì)因?yàn)?code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;background-color:rgba(27,31,35,.05);">viewport太窄而顯示錯(cuò)亂，所以這些瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個(gè)較寬的值，比如980px，這樣的話即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了。ppk把這個(gè)瀏覽器默認(rèn)的viewport叫做 layout viewport。
   
這個(gè)layout viewport的寬度可以通過document.documentElement.clientWidth 來獲取。

然而，layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個(gè)viewport來代表 瀏覽器可視區(qū)域的大小，ppk把這個(gè)viewport叫做 visual viewport 。visual viewport的寬度可以通過window.innerWidth 來獲取，但在Android 2, Oprea mini 和 UC 8中無(wú)法正確獲取。

現(xiàn)在我們已經(jīng)有兩個(gè)viewport了：layout viewport 和  visual viewport。但瀏覽器覺得還不夠，因?yàn)楝F(xiàn)在越來越多的網(wǎng)站都會(huì)為移動(dòng)設(shè)備進(jìn)行單獨(dú)的設(shè)計(jì)，所以必須還要有一個(gè)能完美適配移動(dòng)設(shè)備的viewport。所謂的完美適配指的是，首先不需要用戶縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容；第二，顯示的文字的大小是合適，比如一段14px大小的文字，不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無(wú)法看清，理想的情況是這段14px的文字無(wú)論是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差不多的。當(dāng)然，不只是文字，其他元素像圖片什么的也是這個(gè)道理。ppk把這個(gè)viewport叫做 ideal viewport，也就是第三個(gè)viewport——移動(dòng)設(shè)備的理想viewport。

ideal viewport并沒有一個(gè)固定的尺寸，不同的設(shè)備擁有有不同的ideal viewport。所有的iphone的ideal viewport寬度都是320px，無(wú)論它的屏幕寬度是320還是640，也就是說，在iphone中，css中的320px就代表iphone屏幕的寬度。

但是安卓設(shè)備就比較復(fù)雜了，有320px的，有360px的，有384px的等等，關(guān)于不同的設(shè)備ideal viewport的寬度都為多少，可以到http://viewportsizes.com去查看一下，里面收集了眾多設(shè)備的理想寬度。

再總結(jié)一下：ppk把移動(dòng)設(shè)備上的viewport分為 layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動(dòng)設(shè)備的viewport，ideal viewport的寬度等于移動(dòng)設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為ideal viewport的寬度(單位用px)，那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在于，無(wú)論在何種分辨率的屏幕下，那些針對(duì)ideal viewport而設(shè)計(jì)的網(wǎng)站，不需要用戶手動(dòng)縮放，也不需要出現(xiàn)橫向滾動(dòng)條，都可以完美的呈現(xiàn)給用戶。

 

8.2 利用meta標(biāo)簽對(duì)viewport進(jìn)行控制

移動(dòng)設(shè)備默認(rèn)的viewport是layout viewport，也就是那個(gè)比屏幕要寬的viewport，但在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開發(fā)時(shí)，我們需要的是ideal viewport。那么怎么才能得到ideal viewport呢？這就該輪到meta標(biāo)簽出場(chǎng)了。

我們?cè)陂_發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)，最常見的的一個(gè)動(dòng)作就是把下面這個(gè)東西復(fù)制到我們的head標(biāo)簽中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會(huì)使用那個(gè)比屏幕寬的默認(rèn)viewport，也就是說會(huì)出現(xiàn)橫向滾動(dòng)條。

這個(gè)name為viewport的meta標(biāo)簽到底有哪些東西呢，又都有什么作用呢？

meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動(dòng)設(shè)備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對(duì)meta viewport的支持，事實(shí)也證明這個(gè)東西還是非常有用的。

在蘋果的規(guī)范中，meta viewport 有6個(gè)屬性(暫且把content中的那些東西稱為一個(gè)個(gè)屬性和值)，如下：

這些屬性可以同時(shí)使用，也可以單獨(dú)使用或混合使用，多個(gè)屬性同時(shí)使用時(shí)用逗號(hào)隔開就行了。

此外，在安卓中還支持  target-densitydpi  這個(gè)私有屬性，它表示目標(biāo)設(shè)備的密度等級(jí)，作用是決定css中的1px代表多少物理像素

特別說明的是，當(dāng) target-densitydpi=device-dpi 時(shí)， css中的1px會(huì)等于物理像素中的1px。

因?yàn)檫@個(gè)屬性只有安卓支持，并且安卓已經(jīng)決定要廢棄<strike>target-densitydpi</strike>  這個(gè)屬性了，所以這個(gè)屬性我們要避免進(jìn)行使用  。

8.3 把當(dāng)前的viewport寬度設(shè)置為 ideal viewport 的寬度

要得到ideal viewport就必須把默認(rèn)的layout viewport的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度。因?yàn)?code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;background-color:rgba(27,31,35,.05);">meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設(shè)為width-device這個(gè)特殊的值就行了。

<meta name="viewport" content="width=device-width">

下圖是這句代碼在各大移動(dòng)端瀏覽器上的測(cè)試結(jié)果：

可以看到通過width=device-width，所有瀏覽器都能把當(dāng)前的viewport寬度變成ideal viewport的寬度，但要注意的是，在iphone和ipad上，無(wú)論是豎屏還是橫屏，寬度都是豎屏?xí)rideal viewport的寬度。

這樣的寫法看起來誰(shuí)都會(huì)做，沒吃過豬肉，誰(shuí)還沒見過豬跑啊~，確實(shí)，我們?cè)陂_發(fā)移動(dòng)設(shè)備上的網(wǎng)頁(yè)時(shí)，不管你明不明白什么是viewport，可能你只需要這么一句代碼就夠了。

可是你肯定不知道

<meta name="viewport" content="initial-scale=1">

這句代碼也能達(dá)到和前一句代碼一樣的效果，也可以把當(dāng)前的的viewport變?yōu)?nbsp;ideal viewport。

呵呵，傻眼了吧，因?yàn)閺睦碚撋蟻碇v，這句代碼的作用只是不對(duì)當(dāng)前的頁(yè)面進(jìn)行縮放，也就是頁(yè)面本該是多大就是多大。那為什么會(huì)有 width=device-width 的效果呢？

要想清楚這件事情，首先你得弄明白這個(gè)縮放是相對(duì)于什么來縮放的，因?yàn)檫@里的縮放值是1，也就是沒縮放，但卻達(dá)到了 ideal viewport 的效果，所以，那答案就只有一個(gè)了，縮放是相對(duì)于 ideal viewport來進(jìn)行縮放的，當(dāng)對(duì)ideal viewport進(jìn)行100%的縮放，也就是縮放值為1的時(shí)候，不就得到了 ideal viewport嗎？事實(shí)證明，的確是這樣的。下圖是各大移動(dòng)端的瀏覽器當(dāng)設(shè)置了<meta name="viewport" content="initial-scale=1">后是否能把當(dāng)前的viewport 寬度變成 ideal viewport 的寬度的測(cè)試結(jié)果。

測(cè)試結(jié)果表明 initial-scale=1 也能把當(dāng)前的 viewport 寬度變成 ideal viewport 的寬度，但這次輪到了windows phone 上的IE 無(wú)論是豎屏還是橫屏都把寬度設(shè)為豎屏?xí)r ideal viewport 的寬度。但這點(diǎn)小瑕疵已經(jīng)無(wú)關(guān)緊要了。

但如果 width 和 initial-scale=1 同時(shí)出現(xiàn)，并且還出現(xiàn)了沖突呢？比如：

<meta name="viewport" content="width=400, initial-scale=1">

width=400 表示把當(dāng)前 viewport 的寬度設(shè)為400px，initial-scale=1 則表示把當(dāng)前 viewport 的寬度設(shè)為ideal viewport的寬度，那么瀏覽器到底該服從哪個(gè)命令呢？是書寫順序在后面的那個(gè)嗎？不是。當(dāng)遇到這種情況時(shí)，瀏覽器會(huì)取它們兩個(gè)中較大的那個(gè)值。例如，當(dāng)width=400，ideal viewport 的寬度為320時(shí)，取的是400；當(dāng)width=400， ideal viewport的寬度為480時(shí)，取的是ideal viewport的寬度。（ps:在uc9瀏覽器中，當(dāng)initial-scale=1時(shí)，無(wú)論width屬性的值為多少，此時(shí)viewport的寬度永遠(yuǎn)都是ideal viewport的寬度）

最后，總結(jié)一下，要把當(dāng)前的viewport寬度設(shè)為ideal viewport的寬度，既可以設(shè)置 width=device-width，也可以設(shè)置 initial-scale=1，但這兩者各有一個(gè)小缺陷，就是iphone、ipad以及IE 會(huì)橫豎屏不分，通通以豎屏的ideal viewport寬度為準(zhǔn)。所以，最完美的寫法應(yīng)該是，兩者都寫上去，這樣就 initial-scale=1 解決了 iphone、ipad的毛病，width=device-width則解決了IE的毛病：

<meta name="viewport" content="width=device-width, initial-scale=1">

8.4 關(guān)于meta viewport的更多知識(shí)

8.4.1 關(guān)于縮放以及initial-scale的默認(rèn)值

首先我們先來討論一下縮放的問題，前面已經(jīng)提到過，縮放是相對(duì)于 ideal viewport 縮放的，縮放值越大，當(dāng)前viewport的寬度就會(huì)越小，反之亦然。例如在iphone中，ideal viewport 的寬度是320px，如果我們?cè)O(shè)置 initial-scale=2 ，此時(shí) viewport 的寬度會(huì)變?yōu)橹挥?60px了，這也好理解，放大了一倍嘛，就是原來1px的東西變成2px了，但是1px變?yōu)?px并不是把原來的320px變?yōu)?40px了，而是在實(shí)際寬度不變的情況下，1px變得跟原來的2px的長(zhǎng)度一樣了，所以放大2倍后原來需要320px才能填滿的寬度現(xiàn)在只需要160px就做到了。因此，我們可以得出一個(gè)公式：

visual viewport寬度 = ideal viewport寬度 / 當(dāng)前縮放值

當(dāng)前縮放值 = ideal viewport寬度 / visual viewport寬度

ps: visual viewport 的寬度指的是瀏覽器可視區(qū)域的寬度。

大多數(shù)瀏覽器都符合這個(gè)理論，但是安卓上的原生瀏覽器以及IE有些問題。安卓自帶的webkit瀏覽器只有在 initial-scale = 1 以及沒有設(shè)置width屬性時(shí)才是表現(xiàn)正常的，也就相當(dāng)于這理論在它身上基本沒用；而IE則根本不甩initial-scale這個(gè)屬性，無(wú)論你給他設(shè)置什么，initial-scale表現(xiàn)出來的效果永遠(yuǎn)是1。

好了，現(xiàn)在再來說下 initial-scale 的默認(rèn)值問題，就是不寫這個(gè)屬性的時(shí)候，它的默認(rèn)值會(huì)是多少呢？很顯然不會(huì)是1，因?yàn)楫?dāng) initial-scale = 1 時(shí)，當(dāng)前的 layout viewport 寬度會(huì)被設(shè)為 ideal viewport 的寬度，但前面說了，各瀏覽器默認(rèn)的 layout viewport 寬度一般都是980啊，1024啊，800啊等等這些個(gè)值，沒有一開始就是 ideal viewport 的寬度的，所以 initial-scale 的默認(rèn)值肯定不是1。安卓設(shè)備上的 initial-scale 默認(rèn)值好像沒有方法能夠得到，或者就是干脆它就沒有默認(rèn)值，一定要你顯示的寫出來這個(gè)東西才會(huì)起作用，我們不管它了，這里我們重點(diǎn)說一下iphone和ipad上的 initial-scale 默認(rèn)值。

根據(jù)測(cè)試，我們可以在iphone和ipad上得到一個(gè)結(jié)論，就是無(wú)論你給 layout viewpor 設(shè)置的寬度是多少，而又沒有指定初始的縮放值的話，那么iphone和ipad會(huì)自動(dòng)計(jì)算 initial-scale 這個(gè)值，以保證當(dāng)前 layout viewport 的寬度在縮放后就是瀏覽器可視區(qū)域的寬度，也就是說不會(huì)出現(xiàn)橫向滾動(dòng)條。比如說，在iphone上，我們不設(shè)置任何的 viewport meta 標(biāo)簽，此時(shí) layout viewport 的寬度為980px，但我們可以看到瀏覽器并沒有出現(xiàn)橫向滾動(dòng)條，瀏覽器默認(rèn)的把頁(yè)面縮小了。根據(jù)上面的公式，當(dāng)前縮放值 = ideal viewport寬度 / visual viewport寬度，我們可以得出：

當(dāng)前縮放值 = 320 / 980

也就是當(dāng)前的 initial-scale 默認(rèn)值應(yīng)該是 0.33這樣子。當(dāng)你指定了 initial-scale 的值后，這個(gè)默認(rèn)值就不起作用了。

總之記住這個(gè)結(jié)論就行了：在iphone和ipad上，無(wú)論你給viewport設(shè)的寬的是多少，如果沒有指定默認(rèn)的縮放值，則iphone和ipad會(huì)自動(dòng)計(jì)算這個(gè)縮放值，以達(dá)到當(dāng)前頁(yè)面不會(huì)出現(xiàn)橫向滾動(dòng)條(或者說viewport的寬度就是屏幕的寬度)的目的。

8.4.2 動(dòng)態(tài)改變meta viewport標(biāo)簽

第一種方法

可以使用 document.write 來動(dòng)態(tài)輸出 meta viewport 標(biāo)簽，例如：

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

第二種方法

通過 setAttribute 來改變

<meta id="testViewport" name="viewport" content="width = 380"><script>var mvp = document.getElementById('testViewport');mvp.setAttribute('content','width=480');</script>

安卓2.3自帶瀏覽器上的一個(gè) bug

<meta name="viewport" content="width=device-width"><script type="text/javascript">alert(document.documentElement.clientWidth); //彈出600，正常情況應(yīng)該彈出320</script><meta name="viewport" content="width=600"><script type="text/javascript">alert(document.documentElement.clientWidth); //彈出320，正常情況應(yīng)該彈出600</script>

測(cè)試的手機(jī) ideal viewport 寬度為320px，第一次彈出的值是600,但這個(gè)值應(yīng)該是第行meta標(biāo)簽的結(jié)果啊，然后第二次彈出的值是320，這才是第一行meta標(biāo)簽所達(dá)到的效果啊，所以在安卓2.3(或許是所有2.x版本中)的自帶瀏覽器中，對(duì) meta viewport 標(biāo)簽進(jìn)行覆蓋或更改，會(huì)出現(xiàn)讓人非常迷糊的結(jié)果。

最后我們來看一個(gè)栗子來加深上面概念的印象：

一只筆的像素如下：

這只筆在屏幕c,d,e下的顯示效果如下：

看到同一張圖片在各屏幕顯示大小不一。
我們希望不同屏幕顯示圖片的大小要一致。
我們要計(jì)算圖片縮放比例。
計(jì)算公式：
(圖片邏輯像素大小px1) / (圖片縮放后實(shí)際像素大小px2) = (設(shè)備像素dp) / (設(shè)備獨(dú)立像素dips)
px2 = px1 * (dp / dips)
px2 = px1 * dpr
此時(shí)，這只筆在屏幕c,d,e下的顯示效果如下：

通過上面的我們可以看到，不同的 DPR (設(shè)備像素比)要想顯示大小一樣，必須準(zhǔn)備三張不同分辨率的圖片，那么，我想一張圖片就在三種不同的屏幕下顯示一樣的大小，能做到嗎？當(dāng)然能做到，這就需要縮放了，要自己計(jì)算縮放多麻煩，那有沒有一種簡(jiǎn)單的方式呢？當(dāng)然有，那就是你在熟悉不過的px,你會(huì)發(fā)現(xiàn)設(shè)置圖片寬度為50px以后，在各個(gè)移動(dòng)終端的大小看起來都一樣，這是什么原因呢。

按照 CSS 規(guī)范的定義，CSS 中的 px 是一個(gè)相對(duì)長(zhǎng)度，它相對(duì)的，是 viewing device 的分辨率。這個(gè)viewing device，通常就是電腦顯示器。典型的電腦顯示器的分辨率是96DPI，也就是1像素為1/96英寸（實(shí)際上，假設(shè)我們的顯示器分辨率都與物理分辨率一致，而液晶點(diǎn)距其實(shí)是0.25mm到0.29mm之間，所以不太可能是正好1/96英寸，而只是接近）。

一般來說，px 就是對(duì)應(yīng)設(shè)備的物理像素，然而如果輸出設(shè)備的解析度與電腦顯示器大不相同，輸出效果就會(huì)有問題。例如打印機(jī)輸出到紙張上，其解析度比電腦屏幕要高許多，如果不縮放，直接使用設(shè)備的物理像素，那電腦上的照片由 600DPI 的打印機(jī)打出來就比用顯示器看小了約6倍。

所以 CSS 規(guī)定，在這種情況下，瀏覽器應(yīng)該對(duì)像素值進(jìn)行縮放調(diào)節(jié)，以保持閱讀體驗(yàn)的大體一致。也就是要保持一定像素的長(zhǎng)度在不同設(shè)備輸出上看上去的大小總是差不多。

怎樣確保這一點(diǎn)呢？直接按照設(shè)備物理像素的大小進(jìn)行換算當(dāng)然是一個(gè)方式，但是CSS考慮得更多，它建議，轉(zhuǎn)換應(yīng)按照“參考像素”（reference pixel）來進(jìn)行。

眼睛看到的大小，取決于可視角度。而可視角度取決于物體的實(shí)際大小以及物體與眼睛的距離。10米遠(yuǎn)處一個(gè)1米見方的東西，與1米遠(yuǎn)處的10厘米見方的東西，看上去的大小差不多是一樣的，所謂一葉障目不見泰山，講的就是這個(gè)常識(shí)。

因此CSS規(guī)范使用視角來定義“參考像素”，1參考像素即為從一臂之遙看解析度為96DPI的設(shè)備輸出（即1英寸96點(diǎn)）時(shí)，1點(diǎn)（即1/96英寸）的視角。

請(qǐng)注意這個(gè)差別——CSS規(guī)范定義的參考像素并不是1/96英寸，而是1/96英寸在一臂之遙的看起來的視角。通常認(rèn)為常人臂長(zhǎng)為28英寸，所以其視角可以計(jì)算出來是0.0213度。（即(1/96)in / (28in * 2 * PI / 360deg) ）

我們?cè)谑褂貌煌O(shè)備輸出時(shí)，眼睛與設(shè)備輸出的典型距離是不同的。比如電腦顯示器，通常是一臂之距，而看書和紙張時(shí)（對(duì)應(yīng)于打印機(jī)的設(shè)備輸出），則通常會(huì)更近一些?？措娨晻r(shí)則會(huì)更遠(yuǎn)，比如一般建議是電視機(jī)屏幕對(duì)角線的2.5到3倍長(zhǎng)——如果你是個(gè)42'彩電，那就差不多是3米遠(yuǎn)?？措娪暗脑挕揖筒恢蓝噙h(yuǎn)了，您自己量吧。

因此，1參考像素：
對(duì)于電腦顯示器是0.26mm（即1/96英寸）；
對(duì)于激光打印機(jī)是0.20mm（假設(shè)閱讀距離通常為55cm，即21英寸）；

而換算時(shí)，對(duì)于300DPI的打印機(jī)（即每個(gè)點(diǎn)是1/300英寸），1px通常會(huì)四舍五入到3dots，也就是0.25mm左右；而對(duì)于600DPI的打印機(jī)，則可能四舍五入到5dots，也就是0.21mm。

上圖中，左邊的屏幕（可以認(rèn)為是電腦屏幕）的典型視覺距離是71厘米即28英寸，其1px對(duì)應(yīng)了0.28mm；
而右邊的屏幕（可以認(rèn)為是你的42寸高清電視）的典型視覺距離是3.5米即120英寸，其1px對(duì)應(yīng)1.3mm。42寸的1080p電視，分辨率是1920*1080，則其物理像素只有0.5mm左右，可見確實(shí)是高清哦。

綜上，px 是一個(gè)相對(duì)單位，而且在特定設(shè)備上總是一個(gè)近似值（原則是盡量接近參考像素）。

然而，如果你把絕對(duì)單位理解為對(duì)輸出效果的絕對(duì)掌控，事情卻大相徑庭。就網(wǎng)頁(yè)輸出的最主要對(duì)象——電腦屏幕來說，px 可被視為一個(gè)基準(zhǔn)單位——與桌面分辨率一致，如果是液晶屏，則幾乎總是與液晶屏物理分辨率一致——也就是說網(wǎng)頁(yè)設(shè)計(jì)者設(shè)定的1px，就是“最終看到這個(gè)網(wǎng)頁(yè)的用戶的顯示器上的1個(gè)點(diǎn)距”！反倒是那些絕對(duì)單位，其實(shí)一點(diǎn)也不絕對(duì)。