在移動(dòng)設(shè)備上進(jìn)行網(wǎng)頁(yè)的重構(gòu)或開(kāi)發(fā),首先得搞明白的就是移動(dòng)設(shè)備上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有關(guān)的meta標(biāo)簽的使用,才能更好地讓我們的網(wǎng)頁(yè)適配或響應(yīng)各種不同分辨率的移動(dòng)設(shè)備。
一、viewport的概念
通俗的講,移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來(lái)顯示我們的網(wǎng)頁(yè)的那一塊區(qū)域,在具體一點(diǎn),就是瀏覽器上(也可能是一個(gè)app中的webview)用來(lái)顯示網(wǎng)頁(yè)的那部分區(qū)域,但viewport又不局限于瀏覽器可視區(qū)域的大小,它可能比瀏覽器的可視區(qū)域要大,也可能比瀏覽器的可視區(qū)域要小。在默認(rèn)情況下,一般來(lái)講,移動(dòng)設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的,這是因?yàn)榭紤]到移動(dòng)設(shè)備的分辨率相對(duì)于桌面電腦來(lái)說(shuō)都比較小,所以為了能在移動(dòng)設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計(jì)的網(wǎng)站,移動(dòng)設(shè)備上的瀏覽器都會(huì)把自己默認(rèn)的viewport設(shè)為980px或1024px(也可能是其它值,這個(gè)是由設(shè)備自己決定的),但帶來(lái)的后果就是瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條,因?yàn)闉g覽器可視區(qū)域的寬度是比這個(gè)默認(rèn)的viewport的寬度要小的。下圖列出了一些設(shè)備上瀏覽器的默認(rèn)viewport的寬度。
二、css中的1px并不等于設(shè)備的1px
在css中我們一般使用px作為單位,在桌面瀏覽器中css的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素,這可能會(huì)造成我們的一個(gè)錯(cuò)覺(jué),那就是css中的像素就是設(shè)備的物理像素。但實(shí)際情況卻并非如此,css中的像素只是一個(gè)抽象的單位,在不同的設(shè)備或不同的環(huán)境中,css中的1px所代表的設(shè)備物理像素是不同的。在為桌面瀏覽器設(shè)計(jì)的網(wǎng)頁(yè)中,我們無(wú)需對(duì)這個(gè)津津計(jì)較,但在移動(dòng)設(shè)備上,必須弄明白這點(diǎn)。在早先的移動(dòng)設(shè)備中,屏幕像素密度都比較低,如iphone3,它的分辨率為320x480,在iphone3上,一個(gè)css像素確實(shí)是等于一個(gè)屏幕物理像素的。后來(lái)隨著技術(shù)的發(fā)展,移動(dòng)設(shè)備的屏幕像素密度越來(lái)越高,從iphone4開(kāi)始,蘋果公司便推出了所謂的Retina屏,分辨率提高了一倍,變成640x960,但屏幕尺寸卻沒(méi)變化,這就意味著同樣大小的屏幕上,像素卻多了一倍,這時(shí),一個(gè)css像素是等于兩個(gè)物理像素的。其他品牌的移動(dòng)設(shè)備也是這個(gè)道理。例如安卓設(shè)備根據(jù)屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級(jí),分辨率也是五花八門,安卓設(shè)備上的一個(gè)css像素相當(dāng)于多少個(gè)屏幕物理像素,也因設(shè)備的不同而不同,沒(méi)有一個(gè)定論。
還有一個(gè)因素也會(huì)引起css中px的變化,那就是用戶縮放。例如,當(dāng)用戶把頁(yè)面放大一倍,那么css中1px所代表的物理像素也會(huì)增加一倍;反之把頁(yè)面縮小一倍,css中1px所代表的物理像素也會(huì)減少一倍。關(guān)于這點(diǎn),在文章后面的部分還會(huì)講到。
在移動(dòng)端瀏覽器中以及某些桌面瀏覽器中,window對(duì)象有一個(gè)devicePixelRatio屬性,它的官方的定義為:設(shè)備物理像素和設(shè)備獨(dú)立像素的比例,也就是 devicePixelRatio = 物理像素 / 獨(dú)立像素。css中的px就可以看做是設(shè)備的獨(dú)立像素,所以通過(guò)devicePixelRatio,我們可以知道該設(shè)備上一個(gè)css像素代表多少個(gè)物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值為2,也就是說(shuō)1個(gè)css像素相當(dāng)于2個(gè)物理像素。但是要注意的是,devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問(wèn)題,所以我們現(xiàn)在還并不能完全信賴這個(gè)東西。