本文分為兩個(gè)部分，第一部分討論跨平臺(tái)網(wǎng)站的可行性，第二部分討論viewport是如何設(shè)置的

開(kāi)發(fā)跨平臺(tái)網(wǎng)站？

靠標(biāo)簽的自適應(yīng)寬高實(shí)現(xiàn)多尺寸通用！？

標(biāo)簽寬高可以自適應(yīng)沒(méi)錯(cuò)，我們很早就可以這么做了。但是你會(huì)發(fā)現(xiàn)很多pc端的傳統(tǒng)網(wǎng)站還是會(huì)把寬度固定。（淘寶采用1000px寬度，搜狐950px...）為什么我們不讓網(wǎng)站自適應(yīng)寬高呢？那是因?yàn)椋绻覀兟?tīng)任標(biāo)簽寬度被瀏覽器任意拉伸，將導(dǎo)致極差的體驗(yàn)：你不會(huì)希望當(dāng)瀏覽器被縮放到100px時(shí)，你的左邊欄變成了面條；也不會(huì)希望當(dāng)瀏覽器被過(guò)度拉伸時(shí)，你的網(wǎng)站看起來(lái)像小學(xué)生的橫格本。所以，靠標(biāo)簽的自適應(yīng)來(lái)實(shí)現(xiàn)跨平臺(tái)，是不現(xiàn)實(shí)的，是以犧牲用戶體驗(yàn)為代價(jià)的。很多時(shí)候我們必須固定寬高。

依靠html5設(shè)備檢測(cè)構(gòu)建響應(yīng)式網(wǎng)站！

我們依靠html5的設(shè)備檢測(cè)查看當(dāng)前設(shè)備是手機(jī)還是平板，并依此去加載相對(duì)應(yīng)的css。舉個(gè)例子來(lái)說(shuō)：如果檢測(cè)到你的設(shè)備是平板，我可以橫著顯示三欄，如果是手機(jī)的話，我就只顯示一欄。這個(gè)聽(tīng)起來(lái)不難，但實(shí)現(xiàn)起來(lái)非常復(fù)雜，我們不僅要針對(duì)不同設(shè)備開(kāi)發(fā)多套模版，還要對(duì)圖片的尺寸進(jìn)行處理。對(duì)此，我們可以看看波士頓環(huán)球報(bào)是如何借助HTML5實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的。

總的來(lái)說(shuō)，實(shí)現(xiàn)跨平臺(tái)網(wǎng)站對(duì)大多數(shù)網(wǎng)站來(lái)說(shuō)成本過(guò)高，限制太多，是否可行要結(jié)合網(wǎng)站實(shí)際情況。

viewport與網(wǎng)站尺寸

手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的“窗口”（viewport）中，通常這個(gè)虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個(gè)網(wǎng)頁(yè)擠到很小 的窗口中（這樣會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局），用戶可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的不同部分。移動(dòng)瀏覽器引進(jìn)了 viewport 這個(gè) meta tag，讓網(wǎng)頁(yè)開(kāi)發(fā)者來(lái)控制 viewport 的大小和縮放。

基本概念

（1） CSS pixels與device pixels

CSS pixels： 瀏覽器使用的抽象單位， 主要用來(lái)在網(wǎng)頁(yè)上繪制內(nèi)容。

device pixels： 顯示屏幕的的最小物理單位，每個(gè)dp包含自己的顏色、亮度。

等值的 CSS pixels在手機(jī)屏幕上占多大的位置，這不是固定的，這取決于很多屬性。經(jīng)過(guò)分析和總結(jié)，我們可以得出這么一條公式： 1 CSS pixels = （devicePixelRatio）^2 device pixels （^2是平方的意思，至于 devicePixelRatio是什么東西，后面會(huì)講解） 。

（2） PPI/DPI

PPI，有時(shí)也叫DPI，所表示的是每英寸所擁有的像素（pixel）數(shù)目，數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。（注：這里的像素， 指的是device pixels。）搞清楚了PPI是什么意思，我們就能很容易理解PPI的計(jì)算方式了，我們需要首先算出手機(jī)屏幕的對(duì)角線等效像素，然后處以對(duì)角線（我們平 常所說(shuō)的手機(jī)屏幕尺寸就是說(shuō)的手機(jī)屏幕對(duì)角線的長(zhǎng)度），就可以得到PPI了。準(zhǔn)確的計(jì)算公示大家可以參照下圖。比較有意思的是，根據(jù)公式計(jì)算出來(lái)的 iPhone 4的PPI為330，要比蘋果官方公布的326要高一點(diǎn)點(diǎn)。

同理，以HTC G7為例，480*800的分辨率，3.7英寸，算出來(lái)就是252的PPI。

（3） 密度決定比例

我們計(jì)算PPI就是為了知道一部手機(jī)設(shè)備是屬于哪個(gè)密度區(qū)間的，因?yàn)椴煌拿芏葏^(qū)間，對(duì)應(yīng)著不同的默認(rèn)縮放比例，這是一個(gè)很重要的概念。

由上圖可知，PPI在120-160之間的手機(jī)被歸為低密度手機(jī)，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個(gè)上流的名字——retina）。

這些密度對(duì)應(yīng)著一個(gè)特定的縮放比例值，拿我們最熟悉的iphone4或4s來(lái)說(shuō)，它們的PPI是326，屬于超高密度的手機(jī)。當(dāng)我們書寫一個(gè)寬度為 320px的頁(yè)面放到iphone中顯示，你會(huì)發(fā)現(xiàn)，它竟然是滿寬的。這是因?yàn)椋?yè)面被默認(rèn)放大了兩倍，也就是640px，而iphone4或4s的寬， 正是640px。

圖中把高密度的一類圈起來(lái)，是因?yàn)檫@是android手機(jī)的統(tǒng)計(jì)數(shù)據(jù)，在國(guó)內(nèi)安卓手機(jī)市場(chǎng)中，高密度的設(shè)備占了絕大多數(shù)的市場(chǎng)份額，這是很重要的一點(diǎn)，也是我們做安卓端webapp要注意的關(guān)鍵點(diǎn)。

viewport的使用

viewport總共有5個(gè)屬性，分別如下：

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表