淺談移動(dòng)web開(kāi)發(fā)

1、<p>　　淺談移動(dòng)Web開(kāi)發(fā)（上）：深入概念</p><p>　　如果你是一個(gè)開(kāi)始接觸移動(dòng)Web開(kāi)發(fā)的前端工程師，那么你或許也遇到了和我曾經(jīng)遇到的過(guò)問(wèn)題：有太多新的概念需要掌握，太多相似的概念需要區(qū)分。沒(méi)關(guān)系，我將用兩篇文章的篇幅來(lái)解決這些問(wèn)題。上篇文章關(guān)于解釋和區(qū)分一些入門(mén)級(jí)別概念。這些概念你或許一直在各種場(chǎng)合看到或者聽(tīng)說(shuō)，好像熟的很，但你真的了解它們背后的含義嗎？下篇文章我們就需要用到這些概念，

2、聊一聊移動(dòng)設(shè)備上的圖片加載方案。至于響應(yīng)式設(shè)計(jì)，已經(jīng)有太多寫(xiě)的非常好的文章來(lái)敘述它們，這次在這里我就不贅述了。</p><p>　　我們先從聽(tīng)說(shuō)最多一個(gè)概念——PPI開(kāi)始。</p><p><b>　　PPI</b></p><p><b>　　什么是PPI</b></p><p>　　PPI的復(fù)雜

3、之處在于如果他所屬的上下文環(huán)境不同，意義也會(huì)完全不一樣。 當(dāng)我們?cè)谡務(wù)擄@示設(shè)備的PPI時(shí)，它代指的屏幕的像素密度；當(dāng)我們?cè)谡務(wù)摵蛨D片相關(guān)時(shí)，我們談?wù)摰氖谴蛴r(shí)的分辨率或者打印機(jī)的打印精度。這里我們主要描述的前一種情況，關(guān)于后兩種，我們?cè)谖恼碌淖詈髸?huì)談到，有興趣的同學(xué)可以閱讀。</p><p>　　PPI全稱為Pixel Per Inch，譯為每英寸像素取值，更確切的說(shuō)法應(yīng)該是像素密度，也就是衡量單位物理面積內(nèi)擁有

4、像素值的情況。</p><p>　　如上圖所示，在1英寸單位內(nèi)面積內(nèi)擁有的像素越多，密度越大，PPI值就越高。但像素密度的實(shí)際意義是什么？它表達(dá)的是什么？或高或低對(duì)設(shè)備顯示來(lái)說(shuō)有什么影響？</p><p>　　一般來(lái)說(shuō)，我們當(dāng)然希望PPI值越高越好，因?yàn)楦叩腜PI意味著在同一實(shí)際尺寸的物理屏幕上能容納更多的像素，能夠展現(xiàn)更多的畫(huà)面細(xì)節(jié)，也就意味著更平滑的畫(huà)面。原理如下：</p>

5、;<p><b>　　什么是Pixel</b></p><p>　　但你有沒(méi)有仔細(xì)相關(guān)Pixel Per Inch中的pixel像素的概念究竟指的是什么樣的像素？你可能會(huì)反問(wèn)我像素難道還分很多種不成？我可以很確定的告訴你，是的。</p><p><b>　　設(shè)備像素</b></p><p>　　無(wú)論是早期的C

6、RT顯示器還是如今的LCD顯示器，都是基于點(diǎn)陣的。也就是說(shuō)通過(guò)一些列的小點(diǎn)排列成一個(gè)大的矩形，不同的小點(diǎn)通過(guò)顯示不同的顏色來(lái)顯示成圖像。比如下圖就是LCD顯示器上一個(gè)6x6個(gè)小點(diǎn)排列成的矩陣：</p><p>　　注意每一個(gè)像素（pixel，也可以稱之為dot）又是由三個(gè)子像素(subpixel)紅綠藍(lán)組合而成。當(dāng)需要顯示圖片信息時(shí)，它的工作原理可以如下圖所示：</p><p>　　上圖中

7、的左側(cè)是放大之后我們能看到的像素，而右側(cè)就是對(duì)應(yīng)像素在顯示器上的顯示情況了。</p><p>　　注意上圖代表的僅是LCD顯示器的物理像素情況，早期的CRT顯示器的物理像素同樣也是由獨(dú)立的點(diǎn)組成。但是不存在subpixel的概念，情況如下圖所示：</p><p>　　上面描述的這些顯示器上的像素我們就稱之為物理像素(physical pixel)或者設(shè)備像素(device pixel)。&

8、lt;/p><p><b>　　CSS像素</b></p><p>　　作為Web開(kāi)發(fā)者，我們接觸的更多的是用于控制元素樣式的樣式單位像素。這里的像素我們稱之為CSS像素。</p><p>　　CSS像素有什么特別的地方？我們可以借用quirksmode中的這個(gè)例子：</p><p>　　假設(shè)我們用PC瀏覽器打開(kāi)一個(gè)頁(yè)面，瀏

9、覽器此時(shí)的寬度為800px，頁(yè)面上同時(shí)有一個(gè)400px寬的塊級(jí)元素容器。很明顯此時(shí)塊狀容器應(yīng)該占頁(yè)面的一半。</p><p>　　但如果我們把頁(yè)面放大（通過(guò)“Ctrl鍵”加上“+號(hào)鍵”），放大為200%，也就是原來(lái)的兩倍。此時(shí)塊狀容器則橫向占滿了整個(gè)瀏覽器。</p><p>　　吊詭的是此時(shí)我們既沒(méi)有調(diào)整瀏覽器窗口大小，也沒(méi)有改變塊狀元素的css寬度，但是它看上去卻變大了一倍——這是因?yàn)槲?/p>

10、們把CSS像素放大為了原來(lái)的兩倍。</p><p>　　CSS像素與屏幕像素1：1同樣大小時(shí)：</p><p>　　CSS像素(黑色邊框)開(kāi)始被拉伸，此時(shí)1個(gè)CSS像素大于1個(gè)屏幕像素</p><p>　　也就是說(shuō)默認(rèn)情況下一個(gè)CSS像素應(yīng)該是等于一個(gè)物理像素的寬度的，但是瀏覽器的放大操作讓一個(gè)CSS像素等于了兩個(gè)設(shè)備像素寬度。在后面你會(huì)看到更復(fù)雜的情況，在高PPI

11、的設(shè)備上，CSS像素甚至在默認(rèn)狀態(tài)下就相當(dāng)于多個(gè)物理像素的尺寸。</p><p>　　通過(guò)上面這個(gè)例子我想傳遞一個(gè)非常重要的概念，就是CSS像素從來(lái)都只是一個(gè)相對(duì)值。</p><p><b>　　正確答案</b></p><p>　　回到PPI上來(lái)，現(xiàn)在我們有了兩種像素，設(shè)備像素和CSS像素。那么PPI中的像素是指哪一種？</p>

12、<p>　　請(qǐng)記住，PPI中的pixel指的應(yīng)該是物理像素。</p><p>　　但是在維基百科對(duì)PPI的解釋中，pixel被解釋為一種類(lèi)似于分辨率下的像素：</p><p>　　The apparent PPI of a monitor depends upon the screen resolution (that is, the number of pixels) and

13、 the size of the screen in use; a monitor in 800×600 mode has a lower PPI than does the same monitor in a 1024×768 or 1280×960 mode.</p><p>　　上面這段話是在說(shuō)，同一尺寸的顯示器在800x600分辨與1024x768分辨率下的像素密度明顯是不同

14、的，明顯后者單位面積內(nèi)的像素更多，當(dāng)然后者的像素密度更高。</p><p>　　這里考慮了另一種情況，即在同一顯示器下因?yàn)榉直媛收{(diào)整導(dǎo)致顯示器的像素密度不同。這里的像素雖然是不是在瀏覽器中顯示，但原理也類(lèi)似于CSS像素，即由多個(gè)物理像素組成一個(gè)指定分辨率下的像素。</p><p>　　但問(wèn)題是，這樣的比較是沒(méi)有任何意義的，我們通常在比較PPI時(shí)，一定是在跨設(shè)備比較，為了體現(xiàn)設(shè)備的技術(shù)優(yōu)勢(shì)，

15、也一定是拿設(shè)備的最優(yōu)或者極限情況進(jìn)行比較，這樣情況下分辨率下像素是與物理像素一一匹配的。 不能說(shuō)一臺(tái)23寸的2k顯示器和一臺(tái)23寸的1080p顯示器因?yàn)槎寄苷{(diào)整到1440x960的分辨率，那么他們的PPI就相同了？PPI終究是體現(xiàn)設(shè)備某方面性能的參數(shù)。</p><p>　　也就是說(shuō)，當(dāng)我們?cè)谡務(wù)撘慌_(tái)設(shè)備的PPI時(shí)，它是一個(gè)定值，是一個(gè)固定的參數(shù)。</p><p>　　那么PPI怎么計(jì)算呢？

16、沒(méi)錯(cuò)，就和你想的一模一樣，用屏幕邊的物理像素除以物理尺寸即可，以Samsung Galaxy S4為例：</p><p>　　由此可見(jiàn)Galaxy S4的屏幕分辨率為441PPI。</p><p>　　The Bad and the Ugly</p><p>　　但PPI過(guò)高同樣也會(huì)帶來(lái)問(wèn)題，相同的圖片素材，在越高的設(shè)備上會(huì)顯示的越小。以下是一個(gè)像素在不同PPI設(shè)備

17、上的可見(jiàn)情況，隨著PPI的增高可視度越來(lái)越小：</p><p>　　那么可以預(yù)見(jiàn)一種很糟糕的情況是，同一尺寸的屏幕下假設(shè)PPI提高了一倍，很可能程序界面縮小了4倍（因?yàn)樵谄聊怀叽绮蛔兊那闆r下物理像素點(diǎn)面積是原來(lái)的1/4）。</p><p>　　以Surface Pro 3為例，它的默認(rèn)分辨率是2160x1440，也就是說(shuō)Surface這臺(tái)設(shè)備的屏幕物理像素有2160x1440個(gè)點(diǎn)，同時(shí)默認(rèn)

18、分辨率情況下，一個(gè)點(diǎn)物理像素點(diǎn)對(duì)應(yīng)于一個(gè)分辨率像素。 但因?yàn)槠聊恢挥?2寸，像素密度非常高，于是就出現(xiàn)了上面的問(wèn)題，各個(gè)文字和圖標(biāo)被縮的太小了，電腦是完全不可用的。</p><p>　　解決方法是，Windows默認(rèn)將所有的文本和素材（實(shí)際上就是分辨率像素）都放大了1.5倍（在“屏幕分辨率”-“放大或縮小文本和其他項(xiàng)”中進(jìn)行了設(shè)置），原來(lái)是一個(gè)物理像素對(duì)應(yīng)一個(gè)分辨率下的像素，現(xiàn)在則是1.5個(gè)物理像素對(duì)應(yīng)一個(gè)分辨率

19、下的像素，也就意味著分辨率下的像素變大了，實(shí)際分辨率降低了，已經(jīng)變成了1440(2160/1.5)x900(1440/1.5)（此時(shí)如果你嘗試用window.screen.width/window.screen.height去檢測(cè)返回結(jié)果也會(huì)是1440x900）。這里留給讀者一個(gè)問(wèn)題，這樣和直接將PC的分辨率調(diào)整為1440x900有什么區(qū)別呢？</p><p>　　但把素材和文字放大就真的一勞永逸了嗎？不，甚至還

20、會(huì)帶來(lái)副作用。放大素材對(duì)位圖來(lái)說(shuō)是非常危險(xiǎn)的一件事。假設(shè)一款軟件中的素材圖片分辨率為32x32，但是為了配合整體界面的拉伸,它也必須被拉伸至原來(lái)的1.5倍等于為48x48。你一定有在Photoshop中把圖片強(qiáng)制放大為原來(lái)幾倍的效果的經(jīng)驗(yàn)。 這樣以來(lái)，圖片素材就變得模糊了。同時(shí)因?yàn)閃indow使用的字體為點(diǎn)陣字體而非矢量字體，所以甚至在軟件中的字體也會(huì)變得模糊。</p><p>　　簡(jiǎn)單一點(diǎn)來(lái)說(shuō)，采用這種技術(shù)需要

21、將32x32的圖片強(qiáng)制拉伸為48x48，多出來(lái)的像素如何憑空生成？計(jì)算機(jī)只有猜測(cè)了，通過(guò)線性插值算法。所以圖片便會(huì)出現(xiàn)模糊。</p><p>　　但位圖可能會(huì)被拉伸的問(wèn)題并非也是絕對(duì)的，假設(shè)軟件需要顯示的icon大小為32x32，但是圖片素材大小為64x64，那么即使Windows的UI界面拉伸1.5倍，icon大小為48x48，因?yàn)樵瓐D片足夠大，圖片仍處于未拉伸的狀態(tài)。那么也不會(huì)模糊。</p>&

22、lt;p>　　反過(guò)來(lái)我們可以得出結(jié)論，為了讓在低PPI上和高PPI上圖片顯示的效果一致，圖片素材應(yīng)該盡可能的高清。</p><p>　　Apple的Retina技術(shù)使用的也是上面相同的方案。以15.4寸的Retina版Macbook Pro為例。顯示屏的物理像素點(diǎn)實(shí)際上有2880x1880，但其實(shí)默認(rèn)的最優(yōu)分辨率只有1440x900，剛好是物理像素的一半。也就是說(shuō)操作系統(tǒng)默認(rèn)使用了4:1的縮放。但這同樣也有

23、可能會(huì)出現(xiàn)使用軟件虛化的問(wèn)題。</p><p>　　我不清楚Mac軟件開(kāi)發(fā)中是如何解決這個(gè)問(wèn)題的，但可以參考iPhone開(kāi)發(fā)中的解決方案，蘋(píng)果鼓勵(lì)開(kāi)發(fā)者準(zhǔn)備兩份素材，普通和高清素材。并且通過(guò)素材文件名后綴來(lái)區(qū)分，比如普通素材名稱為apple.png，那么高清素材名稱就為apple@2x.png。自然高清素材是普通素材面積的四倍，系統(tǒng)會(huì)優(yōu)先使用高清素材，但自動(dòng)縮小到普通素材的大小，這樣也就不存在圖片拉伸的問(wèn)題了。&

24、lt;/p><p><b>　　PPI之于Web</b></p><p>　　從上面我們得知，因?yàn)楦呦袼孛芏仍O(shè)備下的UI會(huì)采用一定比例的縮放，所以CSS像素也會(huì)面臨同樣的問(wèn)題：</p><p>　　正如上圖所示，左側(cè)普通屏幕中，2x2的CSS像素真的只需要2x2的物理像素。但是右側(cè)高清屏中，2x2的CSS像素卻需要4x4的物理像素。</p&g

25、t;<p>　　我剛剛有說(shuō)道解決高清PPI下圖片渲染問(wèn)題的方法之一就是使用更高清的圖片素材。但問(wèn)題是需要有多高清？</p><p>　　在Retina顯示屏上，根據(jù)上一節(jié)描述的原理，當(dāng)我們需要渲染一張32x32的圖片，我們實(shí)際上需要準(zhǔn)備64x64的素材。因?yàn)樘O(píng)果默認(rèn)把所有素材都進(jìn)行了兩倍的放大。但如果有一臺(tái)更高清的設(shè)備，進(jìn)行了三倍或者四倍或者更高的倍數(shù)，我們豈不是需要準(zhǔn)備更多尺寸或者體積更大的文件素

26、材？在Web開(kāi)發(fā)中我們正在面臨這樣的問(wèn)題。</p><p>　　首先我們要學(xué)會(huì)如何表達(dá)和判斷這樣一種CSS像素和物理像素不平等。</p><p>　　DevicePixelRatio</p><p>　　DevicePixelRatio定義如下：</p><p>　　window.devicePixelRatio = physical pix

27、els / dips</p><p>　　分母dips全稱為device-independent pixels，譯為與設(shè)備無(wú)關(guān)像素。 更通俗的說(shuō)應(yīng)為與物理像素?zé)o關(guān)的CSS像素。</p><p>　　以iPhone4為例，在垂直狀態(tài)下手機(jī)的物理像素寬度有640px，但是因?yàn)?:1縮放的關(guān)系，此時(shí)的dip，設(shè)備報(bào)告給我們的寬度只是320px。 此時(shí)的DevicePixelRatio就為 640

28、 / 320 = 2;</p><p>　　devicePixelRatio說(shuō)白了就是手機(jī)的物理像素與實(shí)際使用像素的縮放比。</p><p>　　注意devicePixelRatio并非是一個(gè)默認(rèn)值。在默認(rèn)情況下CSS像素是由手機(jī)默認(rèn)的縮放決定的。但同時(shí)因?yàn)闉g覽器頁(yè)面也可以被人為的進(jìn)行縮放。比如iPhon4中默認(rèn)的分辨率寬度為320px。瀏覽網(wǎng)頁(yè)時(shí)我們完全可以自行放大兩倍為160px。這樣

29、以來(lái)window.devicePixelRatio就變味了 640 / 160 = 4。</p><p><b>　　dppx</b></p><p>　　與divicePixelRatio幾乎等價(jià)的一個(gè)概念時(shí)dppx：dots per pixel。 表示單個(gè)CSS像素占用的物理像素個(gè)數(shù)。仔細(xì)想想，這與devicePixelRatio其實(shí)是一個(gè)意思, iPhone4的

30、dppx為2，不就是與devicePixelRatio剛好相等嗎。devicePixelRatio是從宏觀上來(lái)說(shuō)這件事。把整體寬度做運(yùn)算。dppx是從微觀角度上說(shuō)這件事，考慮的是單個(gè)像素之間的比較。</p><p><b>　　dpi</b></p><p>　　請(qǐng)記住，當(dāng)我們?cè)谡務(wù)撘慌_(tái)顯示設(shè)備的像素密度時(shí)，dpi與ppi是等價(jià)的。dots per pixel中的do

31、ts就是代指物理像素。</p><p>　　但是如果你在mediaquery中使用dpi是就要注意了，Chrome會(huì)在控制臺(tái)中提示你使用dppx而非dpi:</p><p>　　Consider using ‘dppx’ units instead of ‘dpi’, as in CSS ‘dpi’ means dots-per-CSS-inch, not dots-per-physica

32、l-inch, so does not correspond to the actual ‘dpi’ of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and

33、(min-resolution: 2dppx)</p><p>　　上面這段話的意思是，在mediaquery中inch表示的CSS定義中的一英寸，而非生活中物理定義的一英寸。</p><p>　　實(shí)話實(shí)說(shuō)我并沒(méi)有找到關(guān)于CSS中一英寸的定義，但是在W3C關(guān)于Resolution的定義中，我們可以看到看到它所定義的1dppx是與96dpi具有同樣含義的。那么2dppx也就是192dpi了咯

34、。這當(dāng)然脫離了我們傳統(tǒng)上的dpi了，Surface Pro 3的dpi（也就是ppi）能夠達(dá)到216ppi，但是在默認(rèn)未放大界面時(shí)的dppx仍然可以是1。</p><p>　　CSS Reference Pixel</p><p>　　個(gè)人人為這是一個(gè)很雞肋的概念，但也正是因?yàn)榱私獾娜颂倭?，還是需要值得一提。</p><p>　　假設(shè)我們規(guī)定了CSS像素值需要與設(shè)

35、備像素大小相等，但當(dāng)隨著手持設(shè)備距離人的遠(yuǎn)近不同，設(shè)備像素密度的不同，都會(huì)導(dǎo)致我們看見(jiàn)的設(shè)備上的CSS像素的可見(jiàn)大小發(fā)生變化（類(lèi)似于巨大的月亮因?yàn)殡x地球遙遠(yuǎn)在人眼看來(lái)也不過(guò)像硬幣一樣大小）。為了保證CSS像素在不同設(shè)備和不同距離上觀測(cè)到的大小保持一致保持連貫性。W3C定義了一個(gè)CSS相對(duì)像素（CSS reference pixel）的概念</p><p>　　It is recommended that the

36、reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0

37、.0213 degrees.</p><p>　　W3C規(guī)定，把人眼能夠辨別到的，距離自己一個(gè)手臂長(zhǎng)度（約28英寸），像素密度為96dpi設(shè)備上的一個(gè)物理像素設(shè)為參考像素。所以我們可以算出眼睛看到參考像素的視野角度為0.0213度：</p><p>　　有了這一系列參照，通過(guò)三角函數(shù)關(guān)系，我們可以算出同樣一臺(tái)設(shè)備在不同距離下CSS像素理想的大小。 當(dāng)遠(yuǎn)離觀察者時(shí)像素應(yīng)該增大，當(dāng)靠近觀察者時(shí)

38、像素應(yīng)該減?。?lt;/p><p>　　這么做的優(yōu)勢(shì)在于無(wú)論設(shè)備距離觀察者距離是多少，也無(wú)論設(shè)備的像素密度和物理像素大小是多少，觀察者看到的CSS像素是一致的，保證了用戶體驗(yàn)的一致性：</p><p>　　但問(wèn)題是如何來(lái)實(shí)踐這一標(biāo)準(zhǔn)呢？</p><p>　　<meta name="viewport"></p><p&g

39、t;　　我們有了物理像素，CSS像素——那么問(wèn)題來(lái)了，當(dāng)你再手機(jī)上使用瀏覽器打開(kāi)網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)應(yīng)該按照哪一種寬度進(jìn)行渲染？</p><p>　　首先我們需要了解一個(gè)概念：viewport，我常見(jiàn)到的中文譯為視口，但個(gè)人覺(jué)得這個(gè)翻譯有一些晦澀。 Viewport是用于限制Html元素——“限制”這兩個(gè)字不是那么好理解。quirksmode上有一篇文章談到這個(gè)概念時(shí)打了一個(gè)非常形象的比方：</p><

40、;p>　　假設(shè)body標(biāo)簽內(nèi)有一個(gè)塊狀元素寬度為10%: div {width:10%;}，我們知道當(dāng)我們縮放瀏覽器時(shí)這個(gè)塊狀元素的寬度也會(huì)跟著變化。 這是因?yàn)樗膶挾日妓冈氐?0%。那么它的父元素，也就是body元素的寬度是由誰(shuí)決定的呢？</p><p>　　我們知道一個(gè)塊狀元素默認(rèn)寬度為它父元素的100%，也就是body元素的寬度與包裹它的html元素寬度相同。那么問(wèn)題又變成了html元素

41、的寬度是由誰(shuí)決定的？</p><p>　　答案是瀏覽器窗口?，F(xiàn)在我們可以歸納起來(lái)，html元素是被瀏覽器限制并且包裹起來(lái)的。html的寬度就是瀏覽器的寬度。</p><p>　　但事實(shí)上，html元素寬度是占據(jù)viewport的100%，而在桌面瀏覽器中，viewport與瀏覽器窗口大小剛好相等（注意，這僅僅是在桌面瀏覽器上）。</p><p>　　OK，在于是我們

42、得到了一個(gè)結(jié)論，html寬度是由viewport決定的，但是 在桌面瀏覽器中，viewport大小與瀏覽器窗口大小相等。</p><p>　　但這一套規(guī)則在手機(jī)則是無(wú)法被執(zhí)行的。大部分手機(jī)的屏幕分辨率目測(cè)只有400px，如果頁(yè)面上真的有某一個(gè)頁(yè)面元素僅占10%，也就是40px的話，肉眼幾乎是無(wú)法分辨的。實(shí)際情況應(yīng)該會(huì)更糟糕，iPhone4的Safari默認(rèn)是以980px來(lái)渲染網(wǎng)頁(yè)的。如果你在Chrome以桌面版的

43、方式訪問(wèn)stackoverflow，那么結(jié)果會(huì)是這樣的:</p><p>　　體驗(yàn)非常糟糕吧，所有的鏈接幾乎都無(wú)法準(zhǔn)確點(diǎn)擊。那么如何解決這個(gè)問(wèn)題？</p><p>　　第一個(gè)辦法，放大頁(yè)面。</p><p>　　我們會(huì)很習(xí)慣的用手勢(shì)去放大頁(yè)面。但是要注意我們這里做的僅僅是放大頁(yè)面，改變的是頁(yè)面的縮放(scale)，效果與PC上瀏覽器的類(lèi)似。但是沒(méi)有改變頁(yè)面的布局，此

44、時(shí)用于渲染頁(yè)面布局的layout仍然是980px</p><p>　　第二個(gè)辦法是，改變布局。比如下面一個(gè)頁(yè)面上有一張320px寬的圖片，如果我們以默認(rèn)的980px去渲染的話，它會(huì)顯得過(guò)于窄?。?lt;/p><p>　　但如果我們可以將渲染它的布局設(shè)為320px的話，看上去就會(huì)好很多了，同時(shí)此時(shí)我們也未對(duì)頁(yè)面進(jìn)行縮放：</p><p>　　當(dāng)然你也可以結(jié)合上一步，同時(shí)

45、對(duì)頁(yè)面進(jìn)行縮放：</p><p>　　不僅僅是放大，即使是在320px的像素下，我們也可以進(jìn)行縮?。?lt;/p><p>　　回歸到技術(shù)上，以上這些都可以通過(guò)viewport標(biāo)簽來(lái)解決，比如說(shuō)上面的需求，把布局設(shè)定為320px，同時(shí)進(jìn)行1.5倍的縮放：</p><p>　　<meta name="viewport" content="

46、width=320, initial-scale=1.5"></p><p>　　所見(jiàn)即所得，需要設(shè)置的屬性在content以逗號(hào)分割開(kāi)來(lái)，width表示頁(yè)面布局寬度，initial-scale代表頁(yè)面初始狀態(tài)的縮放比例，如果你不想讓用戶進(jìn)行縮放，還可以添加user-scalable=no字段來(lái)保證用戶無(wú)法進(jìn)行縮放。</p><p>　　更重要的是，我們還可以無(wú)需指定特定寬

47、度，通過(guò)設(shè)置width=device-width，指定布局寬度等于手機(jī)分辨率寬度（但是我們不用關(guān)心手機(jī)分辨寬度是什么）來(lái)更好的利用響應(yīng)式設(shè)計(jì)。注意這里的device-width表示手機(jī)的分辨率寬度，而并非手機(jī)物理像素寬度。iPhone4在垂直狀態(tài)下物理像素寬度為640，這里的device-width代表的則應(yīng)該是它的dip像素320px。</p><p>　　給viewport標(biāo)簽添加width=device-w

48、idth適用于這樣一種情況：你在為移動(dòng)設(shè)備開(kāi)發(fā)的響應(yīng)式網(wǎng)頁(yè)時(shí)，你會(huì)面臨多重分辨率情況，但是你又沒(méi)有必要使用到重量級(jí)的mediaquery，同時(shí)也為了避免手機(jī)瀏覽器使用桌面分辨率寬度去渲染頁(yè)面， 同時(shí)這還能兼容在手機(jī)橫握或者豎握的情況。 這樣讓你的響應(yīng)式頁(yè)面能夠適用大多數(shù)的移動(dòng)設(shè)備。</p><p>　　寫(xiě)到這里我們可以做一個(gè)總結(jié)，viewport標(biāo)簽的作用是什么？它能夠讓你撇開(kāi)設(shè)備的干擾，告訴設(shè)備你想用什么樣的寬

49、度渲染網(wǎng)頁(yè)。讓它聽(tīng)命于你，而不是你聽(tīng)命于他。</p><p>　　上面我們談到viewport有個(gè)半專(zhuān)業(yè)的名詞成為layout viewport，雖然它是一個(gè)非官方的詞匯，但是非常多的文章都引用了這個(gè)概念。layout viewport專(zhuān)用于頁(yè)面渲染的控制。還有一種viewport稱之為visual viewport，可以譯為可視窗口。兩種viewport的區(qū)分如下：</p><p>　　

50、由此可以看出visual viewport就好比是瀏覽網(wǎng)頁(yè)的一個(gè)窗口，網(wǎng)頁(yè)正是這窗外的景色。當(dāng)然我們還會(huì)遇見(jiàn)layout viewport與visual viewport大小相等的情況。比如像下面這樣：</p><p>　　這也就是我上面描述的width=device-width了。</p><p>　　番外篇：PPI和DPI使用的更多場(chǎng)景</p><p>　　在文

51、章的開(kāi)頭我有說(shuō)PPI在不同上下文中的含義是不同的，如果你仍有好奇心，可以繼續(xù)往下閱讀。接下來(lái)我們談?wù)刉eb以外的PPI含義。</p><p>　　首先我們要重申上面的結(jié)論，就談?wù)擄@示設(shè)備的像素密度而已，PPI和DPI和一樣的概念，并且其中的像素pixel和點(diǎn)dots代指的都是物理像素。</p><p>　　如果你去查看一張JPG圖片的屬性時(shí)，你會(huì)發(fā)現(xiàn)有橫向或者縱向的以dpi為單位的屬性或者

52、在Phototshop新建一份文檔時(shí)，要填寫(xiě)一個(gè)以ppi為單位的屬性值：</p><p>　　這里也存在被混用和混淆的地方。其實(shí)他們都表示打印時(shí)的分辨率值。意為在打印時(shí)每英寸上的像素（也就是跟接近PPI，但我們更常用DPI）。這里的英寸當(dāng)然不再是屏幕像素了，而是紙張尺寸了。</p><p>　　PPI或者DPI對(duì)于圖片來(lái)說(shuō)意味著什么？準(zhǔn)確來(lái)說(shuō)什么都不意味著。 一張圖片只是存在相機(jī)或者硬盤(pán)里

53、的數(shù)據(jù)文件而已，你能告訴我它有多少英寸長(zhǎng)或者多少英寸寬嗎？只有當(dāng)它被打印出來(lái)的時(shí)候才會(huì)涉及到打印媒介的尺寸，DPI才有意義。 如果你想讓圖片更豐富，唯一的辦法是增加圖片的像素，提升你的拍攝技巧。</p><p>　　當(dāng)然在紙張上是沒(méi)有像素的概念。但我們可以去抽象的去想象它。假設(shè)有一張300x300像素的圖片。打印分辨率的為30DPI,那么最后打印出來(lái)尺寸為10x10英寸。假如打印時(shí)的DPI值為300DPI，那么打

54、印出來(lái)的尺寸則為1x1英寸。所以我們可以把DPI當(dāng)做調(diào)節(jié)打印尺寸大小的手段。</p><p>　　那么DPI值越高，圖片就越小就越清晰？當(dāng)然也并非如此。如果你距離60厘米去觀看一張194DPI打印出來(lái)的圖片。你會(huì)沒(méi)法區(qū)分它到底是194DPI還是300DPI。因?yàn)槿搜鄣姆直媛适怯邢薜?。這對(duì)顯示設(shè)備同樣通用的。iPhon4的像素密度有326DPI，而New iPad的像素密度只有264DPI，New iPad的顯示效

55、果會(huì)更差嗎？參考大多數(shù)人使用的距離和方式，其實(shí)眼睛得到的效果其實(shí)是無(wú)太大差異的。這也是為什么大型顯示器或者戶外廣告DPI都不會(huì)很高，因?yàn)槲覀冇^看他們的時(shí)候距離很遠(yuǎn)，效果并非太差。</p><p>　　最后我們可以來(lái)看另一個(gè)場(chǎng)景的DPI：描述打印機(jī)的打印分辨率：</p><p>　　當(dāng)一張顯示器上的圖片打印在圖片上的時(shí)候，像素這個(gè)概念其實(shí)是我們想象出來(lái)的，更加實(shí)際的概念時(shí)是印刷設(shè)備的每一個(gè)“

56、點(diǎn)”：</p><p>　　當(dāng)你嘗試去用放大鏡去查看彩色印刷物品上的圖片時(shí)，從小到大你看到的結(jié)果應(yīng)該是這樣的：</p><p>　　為什么會(huì)這樣？簡(jiǎn)而言之，印刷的原理是通過(guò)半色調(diào)(halftone)技術(shù)，通過(guò)控制CMYK四種顏色點(diǎn)印刷時(shí)的每一個(gè)印刷點(diǎn)的大小，角度，間隙來(lái)模擬出一種顏色的感覺(jué)：</p><p>　　比如當(dāng)你以600DPI打印一張150PPI的圖片時(shí)，每

57、一個(gè)像素應(yīng)該包含16個(gè)點(diǎn)(600dots / 150pixels = 4)。</p><p>　　從上面我們已經(jīng)知道PPI能夠決定印刷品物理尺寸的大小，打印機(jī)的DPI參數(shù)更是能進(jìn)一步?jīng)Q定印刷體的好壞。我們用于都在追求更高的DPI和PPI。</p><p>　　150dpi通常已經(jīng)是被認(rèn)為算的上是高質(zhì)量的打印分辨率了。新聞報(bào)紙使用的分辨率通常是85dpi。戶外的廣告牌通常使用的是45dpi。