在移動(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è)備猪贪。

1. 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的寬度研底。

image.png

2. 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)始暂雹，蘋(píng)果公司便推出了所謂的Retina屏首装，分辨率提高了一倍，變成640x960杭跪，但屏幕尺寸卻沒(méi)變化仙逻，這就意味著同樣大小的屏幕上，像素卻多了一倍涧尿，這時(shí)系奉，一個(gè)css像素是等于兩個(gè)物理像素的姑廉。其他品牌的移動(dòng)設(shè)備也是這個(gè)道理瞬内。例如安卓設(shè)備根據(jù)屏幕像素密度可分為ldpi虫蝶、mdpi、hdpi、xhdpi等不同的等級(jí)疼约，分辨率也是五花八門(mén)，安卓設(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è)備物理像素和設(shè)備獨(dú)立像素的比例，也就是 dpr = dp/ dips春塌。
dp(device pixels)：設(shè)備物理像素只壳；
dips(device-independent pixels)：設(shè)備獨(dú)立像素，dips = css像素/scale（縮放比例）惕艳，所以dpr=(dp/css像素)*scale

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è)東西，具體的情況可以看下這篇文章朵你。
devicePixelRatio的測(cè)試結(jié)果：

image.png

3.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ì)問(wèn)徒坡，現(xiàn)在不是有很多手機(jī)分辨率都非常大嗎，比如768x1024，或者1080x1920這樣刻诊，那這樣的手機(jī)用來(lái)顯示為桌面瀏覽器設(shè)計(jì)的網(wǎng)站是沒(méi)問(wèn)題的吧冲簿？前面我們已經(jīng)說(shuō)了亿昏，css中的1px并不是代表屏幕上的1px野舶，你分辨率越大一屋，css中1px代表的物理像素就會(huì)越多冀墨，devicePixelRatio的值也越大诽嘉，這很好理解，因?yàn)槟惴直媛试龃罅司α眨聊怀叽绮](méi)有變大多少丧凤，必須讓css中的1px代表更多的物理像素农渊，才能讓1px的東西在屏幕上的大小與那些低分辨率的設(shè)備差不多，不然就會(huì)因?yàn)樘《床磺逅衾浴Ｋ栽?080x1920這樣的設(shè)備上找都，在默認(rèn)情況下，也許你只要把一個(gè)div的寬度設(shè)為300多px（視devicePixelRatio的值而定）廊酣，就是滿屏的寬度了能耻。回到正題上來(lái)啰扛，如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話嚎京，某些網(wǎng)站就會(huì)因?yàn)関iewport太窄而顯示錯(cuò)亂，所以這些瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個(gè)較寬的值隐解，比如980px鞍帝，這樣的話即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了。ppk把這個(gè)瀏覽器默認(rèn)的viewport叫做layout viewport(布局視口)煞茫。這個(gè)layout viewport的寬度可以通過(guò) document.documentElement.clientWidth 來(lái)獲取帕涌。

然而，layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的续徽，所以我們還需要一個(gè)viewport來(lái)代表 瀏覽器可視區(qū)域的大小蚓曼，ppk把這個(gè)viewport叫做 visual viewport(視覺(jué)視口)。visual viewport的寬度可以通過(guò)window.innerWidth 來(lái)獲取钦扭，但在Android 2, Oprea mini 和 UC 8中無(wú)法正確獲取纫版。
ps: visual viewport的寬度指的是瀏覽器可視區(qū)域的寬度。

image.png

image.png

ideal viewport 并沒(méi)有一個(gè)固定的尺寸吠卷，不同的設(shè)備擁有有不同的 ideal viewport锡垄。所有的 iphone 的 ideal viewport 寬度都是 320px，無(wú)論它的屏幕寬度是 320 還是 640祭隔，也就是說(shuō)货岭，在 iphone 中，css 中的 320px 就代表 iphone 屏幕的寬度疾渴。

image.png

ppk把移動(dòng)設(shè)備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類(lèi)店量，其中的 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)給用戶。

三個(gè)視口總結(jié)如下：

• layout viewport(布局視口)：在PC端上空镜，布局視口等于瀏覽器窗口的寬度浩淘。而在移動(dòng)端上，由于要使為PC端瀏覽器設(shè)計(jì)的網(wǎng)站能夠完全顯示在移動(dòng)端的小屏幕里吴攒，此時(shí)的布局視口會(huì)遠(yuǎn)大于移動(dòng)設(shè)備的屏幕张抄，就會(huì)出現(xiàn)滾動(dòng)條。js獲取布局視口：document.documentElement.clientWidth | document.body.clientWidth洼怔；
• visual viewport(視覺(jué)視口)：用戶正在看到的網(wǎng)頁(yè)的區(qū)域署惯。用戶可以通過(guò)縮放來(lái)查看網(wǎng)站的內(nèi)容。如果用戶縮小網(wǎng)站镣隶，我們看到的網(wǎng)站區(qū)域?qū)⒆兇蠹辏藭r(shí)視覺(jué)視口也變大了，同理安岂，用戶放大網(wǎng)站轻猖，我們能看到的網(wǎng)站區(qū)域?qū)⒖s小，此時(shí)視覺(jué)視口也變小了域那。不管用戶如何縮放咙边，都不會(huì)影響到布局視口的寬度。js獲取視覺(jué)視口：window.innerWidth次员；
• ideal viewport(理想視口)：布局視口的一個(gè)理想尺寸败许，只有當(dāng)布局視口的尺寸等于設(shè)備屏幕的尺寸時(shí)，才是理想視口淑蔚。js獲取理想視口：window.screen.width市殷；

1、在桌面瀏覽器上束倍，瀏覽器窗口與視口的寬度一致被丧，而視口（CSS標(biāo)準(zhǔn)文檔中稱為“初始包含塊”）是CSS百分比寬度推算的根源，因此绪妹，瀏覽器窗口是約束CSS布局的視口甥桂；
2、在手機(jī)上邮旷，有兩個(gè)視口黄选，布局視口會(huì)限制CSS布局；視覺(jué)視口決定用戶看到的網(wǎng)站內(nèi)容；
3办陷、移動(dòng)端瀏覽器還有個(gè)理想視口貌夕，它是對(duì)特定設(shè)備上的特定瀏覽器的布局視口的一個(gè)理想尺寸；
4民镜、可以把布局視口尺寸定義為理想視口啡专。這也是響應(yīng)式設(shè)計(jì)的基礎(chǔ)。

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

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

我們?cè)陂_(kāi)發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)馋嗜，最常見(jiàn)的的一個(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宽档，也就是說(shuō)會(huì)出現(xiàn)橫向滾動(dòng)條。

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

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

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

image.png

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

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

image.png

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

要得到ideal viewport就必須把默認(rèn)的layout viewport的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度。因?yàn)閙eta viewport中的width能控制layout viewport的寬度娇昙，所以我們只需要把width設(shè)為width-device這個(gè)特殊的值就行了尺迂。

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

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

image.png

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

這樣的寫(xiě)法看起來(lái)誰(shuí)都會(huì)做辜限，沒(méi)吃過(guò)豬肉皇拣，誰(shuí)還沒(méi)見(jiàn)過(guò)豬跑啊~，確實(shí)薄嫡，我們?cè)陂_(kāi)發(fā)移動(dòng)設(shè)備上的網(wǎng)頁(yè)時(shí)氧急，不管你明不明白什么是viewport，可能你只需要這么一句代碼就夠了毫深。

可是你肯定不知道

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

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

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

要想清楚這件事情腥沽，首先你得弄明白這個(gè)縮放是相對(duì)于什么來(lái)縮放的逮走，因?yàn)檫@里的縮放值是1，也就是沒(méi)縮放今阳，但卻達(dá)到了 ideal viewport 的效果师溅，所以，那答案就只有一個(gè)了盾舌，縮放是相對(duì)于 ideal viewport來(lái)進(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é)果榆综。

image.png

測(cè)試結(jié)果表明 initial-scale=1 也能把當(dāng)前的viewport寬度變成 ideal viewport 的寬度妙痹，但這次輪到了windows phone 上的IE 無(wú)論是豎屏還是橫屏都把寬度設(shè)為豎屏?xí)rideal 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è)命令呢？是書(shū)寫(xiě)順序在后面的那個(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)硕旗。所以，最完美的寫(xiě)法應(yīng)該是女责，兩者都寫(xiě)上去漆枚，這樣就 initial-scale=1 解決了 iphone、ipad的毛病抵知，width=device-width則解決了IE的毛睬交：

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

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

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

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

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

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

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

好了而咆，現(xiàn)在再來(lái)說(shuō)下initial-scale的默認(rèn)值問(wèn)題霍比，就是不寫(xiě)這個(gè)屬性的時(shí)候，它的默認(rèn)值會(huì)是多少呢暴备？很顯然不會(huì)是1悠瞬，因?yàn)楫?dāng) initial-scale = 1 時(shí)，當(dāng)前的layout viewport寬度會(huì)被設(shè)為 ideal viewport的寬度涯捻，但前面說(shuō)了浅妆，各瀏覽器默認(rèn)的 layout viewport寬度一般都是980啊，1024啊障癌，800啊等等這些個(gè)值凌外，沒(méi)有一開(kāi)始就是 ideal viewport的寬度的，所以 initial-scale的默認(rèn)值肯定不是1涛浙。安卓設(shè)備上的initial-scale默認(rèn)值好像沒(méi)有方法能夠得到康辑，或者就是干脆它就沒(méi)有默認(rèn)值摄欲，一定要你顯示的寫(xiě)出來(lái)這個(gè)東西才會(huì)起作用，我們不管它了疮薇，這里我們重點(diǎn)說(shuō)一下iphone和ipad上的initial-scale默認(rèn)值胸墙。

根據(jù)測(cè)試，我們可以在iphone和ipad上得到一個(gè)結(jié)論惦辛，就是無(wú)論你給layout viewpor設(shè)置的寬度是多少劳秋，而又沒(méi)有指定初始的縮放值的話，那么iphone和ipad會(huì)自動(dòng)計(jì)算initial-scale這個(gè)值胖齐，以保證當(dāng)前l(fā)ayout viewport的寬度在縮放后就是瀏覽器可視區(qū)域的寬度玻淑，也就是說(shuō)不會(huì)出現(xiàn)橫向滾動(dòng)條。比如說(shuō)呀伙，在iphone上补履，我們不設(shè)置任何的viewport meta標(biāo)簽，此時(shí)layout viewport的寬度為980px剿另，但我們可以看到瀏覽器并沒(méi)有出現(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è)的寬的是多少讼稚，如果沒(méi)有指定默認(rèn)的縮放值括儒，則iphone和ipad會(huì)自動(dòng)計(jì)算這個(gè)縮放值，以達(dá)到當(dāng)前頁(yè)面不會(huì)出現(xiàn)橫向滾動(dòng)條(或者說(shuō)viewport的寬度就是屏幕的寬度)的目的锐想。

image.png

image.png

image.png

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

第一種方法
可以使用document.write來(lái)動(dòng)態(tài)輸出meta viewport標(biāo)簽帮寻，例如：

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

第二種方法
通過(guò)setAttribute來(lái)改變

<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é)果嗡髓。

7. 結(jié)語(yǔ)

說(shuō)了那么多廢話，最后還是有必要總結(jié)一點(diǎn)有用的出來(lái)收津。

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

第二哑子、每個(gè)移動(dòng)設(shè)備瀏覽器中都有一個(gè)理想的寬度，這個(gè)理想的寬度是指css中的寬度肌割，跟設(shè)備的物理寬度沒(méi)有關(guān)系卧蜓，在css中，這個(gè)寬度就相當(dāng)于100%的所代表的那個(gè)寬度把敞。我們可以用meta標(biāo)簽把viewport的寬度設(shè)為那個(gè)理想的寬度弥奸，如果不知道這個(gè)設(shè)備的理想寬度是多少，那么用device-width這個(gè)特殊值就行了奋早，同時(shí)initial-scale=1也有把viewport的寬度設(shè)為理想寬度的作用盛霎。所以，我們可以使用

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

來(lái)得到一個(gè)理想的viewport（也就是前面說(shuō)的ideal viewport）耽装。

為什么需要有理想的viewport呢愤炸？比如一個(gè)分辨率為320x480的手機(jī)理想viewport的寬度是320px，而另一個(gè)屏幕尺寸相同但分辨率為640x960的手機(jī)的理想viewport寬度也是為320px掉奄，那為什么分辨率大的這個(gè)手機(jī)的理想寬度要跟分辨率小的那個(gè)手機(jī)的理想寬度一樣呢摇幻？這是因?yàn)椋挥羞@樣才能保證同樣的網(wǎng)站在不同分辨率的設(shè)備上看起來(lái)都是一樣或差不多的挥萌。實(shí)際上，現(xiàn)在市面上雖然有那么多不同種類(lèi)不同品牌不同分辨率的手機(jī)枉侧，但它們的理想viewport寬度歸納起來(lái)無(wú)非也就 320引瀑、360、384榨馁、400等幾種憨栽，都是非常接近的，理想寬度的相近也就意味著我們針對(duì)某個(gè)設(shè)備的理想viewport而做出的網(wǎng)站翼虫，在其他設(shè)備上的表現(xiàn)也不會(huì)相差非常多甚至是表現(xiàn)一樣的屑柔。