移動設(shè)備前端開發(fā)中viewport的理論及使用技巧

時間：2022-05-28 09:39:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-28 09:39:01 來源：網(wǎng)絡(luò)營銷

在移動設(shè)備上進(jìn)行網(wǎng)頁的重構(gòu)或開發(fā)，首先得搞明白的就是移動設(shè)備上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有關(guān)的meta標(biāo)簽的使用，才能更好地讓我們的網(wǎng)頁適配或響應(yīng)各種不同分辨率的移動設(shè)備。

viewport并非只是ios上的獨有屬性，在android、winphone上同樣也有viewport，它們要解決的問題是相同的，即無視設(shè)備的真實分辨率，直接通過dpi，在物理尺寸和瀏覽器之間重設(shè)分辨率，這個分辨率和設(shè)備的分辨率無關(guān)。

一、viewport的概念

通俗的講，移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。

下圖列出了一些設(shè)備上瀏覽器的默認(rèn)viewport的寬度：

在默認(rèn)情況下，一般來講，移動設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因為考慮到移動設(shè)備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計的網(wǎng)站，移動設(shè)備上的瀏覽器都會把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個是由設(shè)備自己決定的），但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動條，因為瀏覽器可視區(qū)域的寬度是比這個默認(rèn)的viewport的寬度要小的。

二、css中的1px并不等于設(shè)備的1px

在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應(yīng)著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設(shè)備的物理像素。

但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的，在為桌面瀏覽器設(shè)計的網(wǎng)頁中，我們無需對這個津津計較，但在移動設(shè)備上，必須弄明白這點。

在早先的移動設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。

后來隨著技術(shù)的發(fā)展，移動設(shè)備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。

其他品牌的移動設(shè)備也是這個道理，例如安卓設(shè)備根據(jù)屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設(shè)備上的一個css像素相當(dāng)于多少個屏幕物理像素，也因設(shè)備的不同而不同，沒有一個定論。

還有一個因素也會引起css中px的變化，那就是用戶縮放，例如，當(dāng)用戶把頁面放大一倍，那么css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。

在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義為：設(shè)備物理像素和設(shè)備獨立像素的比例，也就是devicePixelRatio = 物理像素/獨立像素。

css中的px就可以看做是設(shè)備的獨立像素，所以通過devicePixelRatio，我們可以知道該設(shè)備上一個css像素代表多少個物理像素。

例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css像素相當(dāng)于2個物理像素。但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題，所以我們現(xiàn)在還并不能完全信賴這個東西。

以上便是devicePixelRatio的測試結(jié)果。

三、PPK的關(guān)于三個viewport的理論

對于移動設(shè)備上的viewport有著非常多的研究（具體可查看億企邦《關(guān)于移動設(shè)備頁面尺寸參數(shù)和viewport的理解》的相關(guān)介紹，有興趣的同學(xué)可以去看一下），我認(rèn)為移動設(shè)備上有三個viewport：

首先，移動設(shè)備上的瀏覽器認(rèn)為自己必須能讓所有的網(wǎng)站都正常顯示，即使是那些不是為移動設(shè)備設(shè)計的網(wǎng)站。但如果以瀏覽器的可視區(qū)域作為viewport的話，因為移動設(shè)備的屏幕都不是很寬，所以那些為桌面瀏覽器設(shè)計的網(wǎng)站放到移動設(shè)備上顯示時，必然會因為移動設(shè)備的viewport太窄，而擠作一團(tuán)，甚至布局什么的都會亂掉。

也許有人會問，現(xiàn)在不是有很多手機(jī)分辨率都非常大嗎，比如768x1024，或者1080x1920這樣，那這樣的手機(jī)用來顯示為桌面瀏覽器設(shè)計的網(wǎng)站是沒問題的吧？

前面我們已經(jīng)說了，css中的1px并不是代表屏幕上的1px，你分辨率越大，css中1px代表的物理像素就會越多，devicePixelRatio的值也越大，這很好理解，因為你分辨率增大了，但屏幕尺寸并沒有變大多少，必須讓css中的1px代表更多的物理像素，才能讓1px的東西在屏幕上的大小與那些低分辨率的設(shè)備差不多，不然就會因為太小而看不清。

所以在1080x1920這樣的設(shè)備上，在默認(rèn)情況下，也許你只要把一個div的寬度設(shè)為300多px（視devicePixelRatio的值而定），就是滿屏的寬度了。

回到正題上來，如果把移動設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話，某些網(wǎng)站就會因為viewport太窄而顯示錯亂，所以這些瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個較寬的值，比如980px，這樣的話即使是那些為桌面設(shè)計的網(wǎng)站也能在移動瀏覽器上正常顯示了，我們把這個瀏覽器默認(rèn)的viewport叫做layout viewport，這個layout viewport的寬度可以通過document.documentElement.clientWidth來獲取。

然而，layout viewport的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個viewport來代表 瀏覽器可視區(qū)域的大小，我們把這個viewport叫做visual viewport。

visual viewport的寬度可以通過window.innerWidth來獲取，但在Android 2, Oprea mini和UC 8中無法正確獲取。



現(xiàn)在我們已經(jīng)有兩個viewport了：layout viewport和visual viewport。

但瀏覽器覺得還不夠，因為現(xiàn)在越來越多的網(wǎng)站都會為移動設(shè)備進(jìn)行單獨的設(shè)計，所以必須還要有一個能完美適配移動設(shè)備的viewport。

所謂的完美適配指的是，首先不需要用戶縮放和橫向滾動條就能正常的查看網(wǎng)站的所有內(nèi)容；第二，顯示的文字的大小是合適，比如一段14px大小的文字，不會因為在一個高密度像素的屏幕里顯示得太小而無法看清，理想的情況是這段14px的文字無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差不多的，當(dāng)然，不只是文字，其他元素像圖片什么的也是這個道理，這個viewport叫做ideal viewport，也就是第三個viewport——移動設(shè)備的理想viewport。

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

但是安卓設(shè)備就比較復(fù)雜了，有320px的，有360px的，有384px的等等，關(guān)于不同的設(shè)備ideal viewport的寬度都為多少，可以查看億企邦《詳解移動端設(shè)備頁面尺寸設(shè)計原理》的相關(guān)介紹，或者到網(wǎng)上去查看一下。

再總結(jié)一下：移動設(shè)備上的viewport分為layout viewport、visual viewport和ideal viewport三類，其中的ideal viewport是最適合移動設(shè)備的viewport，ideal viewport的寬度等于移動設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為ideal viewport的寬度(單位用px)，那么這個元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。

ideal viewport的意義在于，無論在何種分辨率的屏幕下，那些針對ideal viewport而設(shè)計的網(wǎng)站，不需要用戶手動縮放，也不需要出現(xiàn)橫向滾動條，都可以完美的呈現(xiàn)給用戶。

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

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

我們在開發(fā)移動設(shè)備的網(wǎng)站時，最常見的的一個動作就是把下面這個東西復(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è)備的寬度，同時不允許用戶手動縮放，也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度，這個應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會使用那個比屏幕寬的默認(rèn)viewport，也就是說會出現(xiàn)橫向滾動條。

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

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

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

width設(shè)置layout viewport的寬度，為一個正整數(shù)，或字符串"width-device"。

initial-scale設(shè)置頁面的初始縮放值，為一個數(shù)字，可以帶小數(shù)。

minimum-scale允許用戶的最小縮放值，為一個數(shù)字，可以帶小數(shù)。

maximum-scale允許用戶的最大縮放值，為一個數(shù)字，可以帶小數(shù)。

height設(shè)置layout viewport的高度，這個屬性對我們并不重要，很少使用。

user-scalable是否允許用戶進(jìn)行縮放，值為"no"或"yes", no代表不允許，yes代表允許。

這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。

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

target-densitydpi值可以為一個數(shù)值或high-dpi、medium-dpi、low-dpi、device-dpi這幾個字符串中的一個。

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

因為這個屬性只有安卓支持，并且安卓已經(jīng)決定要廢棄target-densitydpi這個屬性了，所以這個屬性我們要避免進(jìn)行使用。

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

要得到ideal viewport就必須把默認(rèn)的layout viewport的寬度設(shè)為移動設(shè)備的屏幕寬度，因為meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設(shè)為width-device這個特殊的值就行了。

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

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

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

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

可是你肯定不知道

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

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

呵呵，傻眼了吧，因為從理論上來講，這句代碼的作用只是不對當(dāng)前的頁面進(jìn)行縮放，也就是頁面本該是多大就是多大，那為什么會有width=device-width的效果呢？

要想清楚這件事情，首先你得弄明白這個縮放是相對于什么來縮放的，因為這里的縮放值是1，也就是沒縮放，但卻達(dá)到了ideal viewport 的效果，所以，那答案就只有一個了，縮放是相對于ideal viewport來進(jìn)行縮放的，當(dāng)對ideal viewport進(jìn)行100%的縮放，也就是縮放值為1的時候，不就得到了ideal viewport嗎？事實證明，的確是這樣的。

下圖是各大移動端的瀏覽器當(dāng)設(shè)置了<meta name="viewport" content="initial-scale=1">后是否能把當(dāng)前的viewport寬度變成ideal viewport的寬度的測試結(jié)果。

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

但如果width 和 initial-scale=1同時出現(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的寬度，那么瀏覽器到底該服從哪個命令呢？是書寫順序在后面的那個嗎？不是，當(dāng)遇到這種情況時，瀏覽器會取它們兩個中較大的那個值。

例如，當(dāng)width=400，ideal viewport的寬度為320時，取的是400；當(dāng)width=400， ideal viewport的寬度為480時，取的是ideal viewport的寬度。

在此，億企邦提醒大家一點：在uc9瀏覽器中，當(dāng)initial-scale=1時，無論width屬性的值為多少，此時viewport的寬度永遠(yuǎn)都是ideal viewport的寬度。

最后，總結(jié)一下，要把當(dāng)前的viewport寬度設(shè)為ideal viewport的寬度，既可以設(shè)置 width=device-width，也可以設(shè)置initial-scale=1，但這兩者各有一個小缺陷，就是iphone、ipad以及IE會橫豎屏不分，通通以豎屏的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">

六、關(guān)于meta viewport的更多知識

手機(jī)瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，通常這個虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機(jī)瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。

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

首先我們先來討論一下縮放的問題，前面已經(jīng)提到過，縮放是相對于ideal viewport來縮放的，縮放值越大，當(dāng)前viewport的寬度就會越小，反之亦然。

例如在iphone中，ideal viewport的寬度是320px，如果我們設(shè)置initial-scale=2，此時viewport的寬度會變?yōu)橹挥?60px了，這也好理解，放大了一倍嘛，就是原來1px的東西變成2px了，但是1px變?yōu)?px并不是把原來的320px變?yōu)?40px了，而是在實際寬度不變的情況下，1px變得跟原來的2px的長度一樣了，所以放大2倍后原來需要320px才能填滿的寬度現(xiàn)在只需要160px就做到了，因此，我們可以得出一個公式：

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

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

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

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

好了，現(xiàn)在再來說下initial-scale的默認(rèn)值問題，就是不寫這個屬性的時候，它的默認(rèn)值會是多少呢？很顯然不會是1，因為當(dāng)initial-scale = 1時，當(dāng)前的layout viewport寬度會被設(shè)為ideal viewport的寬度，但前面說了，各瀏覽器默認(rèn)的layout viewport寬度一般都是980啊，1024啊，800啊等等這些個值，沒有一開始就是ideal viewport的寬度的，所以initial-scale的默認(rèn)值肯定不是1。

安卓設(shè)備上的initial-scale默認(rèn)值好像沒有方法能夠得到，或者就是干脆它就沒有默認(rèn)值，一定要你顯示的寫出來這個東西才會起作用，我們不管它了，這里我們重點說一下iphone和ipad上的initial-scale默認(rèn)值。

根據(jù)測試，我們可以在iphone和ipad上得到一個結(jié)論，就是無論你給layout viewpor設(shè)置的寬度是多少，而又沒有指定初始的縮放值的話，那么iphone和ipad會自動計算initial-scale這個值，以保證當(dāng)前l(fā)ayout viewport的寬度在縮放后就是瀏覽器可視區(qū)域的寬度，也就是說不會出現(xiàn)橫向滾動條。

比如說，在iphone上，我們不設(shè)置任何的viewport meta標(biāo)簽，此時layout viewport的寬度為980px，但我們可以看到瀏覽器并沒有出現(xiàn)橫向滾動條，瀏覽器默認(rèn)的把頁面縮小了，根據(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的值后，這個默認(rèn)值就不起作用了。

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

2、動態(tài)改變meta viewport標(biāo)簽

第一種方法

可以使用document.write來動態(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自帶瀏覽器上的一個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>

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

七、結(jié)語

說了那么多廢話，最后還是有必要總結(jié)一點有用的出來。

首先、如果不設(shè)置meta viewport標(biāo)簽，那么移動設(shè)備上瀏覽器默認(rèn)的寬度值為800px，980px，1024px等這些，總之是大于屏幕寬度的，這里的寬度所用的單位px都是指css中的px，它跟代表實際屏幕物理像素的px不是一回事。

其次、每個移動設(shè)備瀏覽器中都有一個理想的寬度，這個理想的寬度是指css中的寬度，跟設(shè)備的物理寬度沒有關(guān)系，在css中，這個寬度就相當(dāng)于100%的所代表的那個寬度。

我們可以用meta標(biāo)簽把viewport的寬度設(shè)為那個理想的寬度，如果不知道這個設(shè)備的理想寬度是多少，那么用device-width這個特殊值就行了，同時initial-scale=1也有把viewport的寬度設(shè)為理想寬度的作用，所以，我們可以使用<meta name="viewport" content="width=device-width, initial-scale=1">來得到一個理想的viewport（也就是前面說的ideal viewport）。

為什么需要有理想的viewport呢？比如一個分辨率為320x480的手機(jī)理想viewport的寬度是320px，而另一個屏幕尺寸相同但分辨率為640x960的手機(jī)的理想viewport寬度也是為320px。

那為什么分辨率大的這個手機(jī)的理想寬度要跟分辨率小的那個手機(jī)的理想寬度一樣呢？這是因為，只有這樣才能保證同樣的網(wǎng)站在不同分辨率的設(shè)備上看起來都是一樣或差不多的。

實際上，現(xiàn)在市面上雖然有那么多不同種類不同品牌不同分辨率的手機(jī)，但它們的理想viewport寬度歸納起來無非也就320、360、384、400等幾種，都是非常接近的，理想寬度的相近也就意味著我們針對某個設(shè)備的理想viewport而做出的網(wǎng)站，在其他設(shè)備上的表現(xiàn)也不會相差非常多甚至是表現(xiàn)一樣的。

億企邦點評：

viewport是專為手機(jī)瀏覽器設(shè)計的一個meta標(biāo)簽，viewport meta是一個初始化很重要的開始，經(jīng)過這次開發(fā)的過程中慢慢分析，調(diào)整才了解到里面一些架構(gòu)狀況，因為目前移動裝置螢?zāi)怀叽绮煌?，種類需求也都不同，最理想的狀況當(dāng)然是一種web全部滿足，不過依照目前的規(guī)格分歧來看，還有一段很長的路要走。