前言
通過上一篇我們已經(jīng)大概明白viewport是什么，但是viewport并沒有那么簡單葵袭，一包研究得身心疲憊涵妥，腦子一個不夠用哈哈，讓我們一起看看吧眶熬！
三個viewport
ppk認(rèn)為妹笆，有三個viewport
1. layout viewport
- 我們先回想一下块请，當(dāng)有一個為PC端設(shè)計的網(wǎng)頁想要放在移動端瀏覽的時候娜氏，如果我們以瀏覽器的可視窗口作為viewport，那由于移動端的屏幕很小墩新，所以這個網(wǎng)頁必然會因為viewport太小而擠在一起導(dǎo)致無法正常顯示網(wǎng)頁贸弥，甚至布局會亂掉。所以這些瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個較寬的值海渊，如iphone把viewport設(shè)為980px绵疲，通過這個viewport移動端的瀏覽器就可以把整個網(wǎng)頁顯示在手機(jī)屏幕上哲鸳，但是整個網(wǎng)頁是被縮小的。ppk把這個瀏覽器默認(rèn)的viewport叫做 layout viewport,我們看一下這張圖就明白了盔憨。
我們可以通過
document.documentElement.clientWidth來獲得布局視窗的寬和高徙菠。
2. visual viewport
- 然而，layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的郁岩，所以我們還需要一個viewport來代表 瀏覽器可視區(qū)域的大小婿奔，ppk把這個viewport叫做 visual viewport。如圖：
用window.innerWidth/Height或者document.documentElement.offsetWidth計算visual viewport的寬度
注意问慎，visual viewport尺寸所對應(yīng)的并不是指屏幕區(qū)域里的物理像素萍摊，而是CSS 像素。并且它所包含的 CSS 像素的數(shù)量也是隨著用戶縮放而有所改變如叼。
layout viewport和visual viewport
- 當(dāng)進(jìn)行縮放（如果你放大冰木，屏幕上的CSS像素會變少）的時候，visual viewport(就是頁面當(dāng)前顯示在屏幕上的部分)的尺寸會發(fā)生變化笼恰，layout viewport的尺寸仍然跟之前的一樣踊沸。
- visual viewport就像一個框，layout viewport就像一張紙社证，也就是紙上有一個框雕沿，框?qū)?zhǔn)紙的哪個部分，你就能看見哪個部分（假設(shè)框外部分不可見）猴仑。你可以把框靠近或遠(yuǎn)離紙（調(diào)整縮放比例）审轮，也可以改變框的位置（調(diào)整滾輪），這些方法都可以改變visual viewport辽俗，但是layout viewport始終不變疾渣。
visual viewport用css像素來衡量尺寸，表示有多少個css像素能夠被用戶看到崖飘。 - 當(dāng)你進(jìn)行頁面放大的時候榴捡，原本在未縮放的頁面上看起來很小的尺寸，現(xiàn)在通過viewport看上去變大了朱浴，事實(shí)上這部分的css的px值并沒有變化吊圾，僅僅是因為進(jìn)行放大后，css的1px的值所占的屏幕分辨率的值變大了翰蠢。同理项乒，當(dāng)你縮小整個頁面的時候原本看起來很大的尺寸，現(xiàn)在再通過viewport看上去的時候又變小了梁沧。同理,css的1px的值并沒有發(fā)生變化,但是1px值所占的屏幕分辨率的值變小了檀何。所以，放大的時候，css像素個數(shù)減少频鉴，visual viewport尺寸減小栓辜，縮小的時候，css像素個數(shù)增多垛孔，藕甩，visual viewport尺寸增大
3. ideal viewport
- 現(xiàn)在我們已經(jīng)有兩個viewport了：layout viewport 和 visual viewport。但是由于原網(wǎng)頁會在我們的移動端縮小周荐，如果我們需要看清文字辛萍，我們往往放大才可以看清字，可是當(dāng)我們放大的時候羡藐，又沒辦法看到整個網(wǎng)頁贩毕，這時想瀏覽整個網(wǎng)頁，我們又不得不左右滑動屏幕（橫向滾動條）仆嗦。
- 于是我們必須還要有一個能完美適配移動設(shè)備的viewport辉阶，所謂的完美適配指的是，首先不需要用戶縮放和橫向滾動條就能正常的查看網(wǎng)站的所有內(nèi)容瘩扼，另外顯示的文字的大小是合適谆甜，比如一段14px大小的文字，不會因為在一個高密度像素的屏幕里顯示得太小而無法看清集绰，理想的情況是這段14px的文字無論是在何種密度屏幕规辱，何種分辨率下，顯示出來的大小都是差不多的栽燕。當(dāng)然罕袋，不只是文字，其他元素像圖片什么的也是這個道理碍岔。ppk把這個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的等等勾拉。
總結(jié)一下：ppk把移動設(shè)備上的viewport分為layout viewport 煮甥、 visual viewport 和 ideal viewport 三類盗温，其中的ideal viewport是最適合移動設(shè)備的viewport藕赞，ideal viewport的寬度等于移動設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為ideal viewport的寬度(單位用px)卖局，那么這個元素的寬度就是設(shè)備屏幕的寬度了斧蜕，也就是寬度為100%的效果。從另一角度看砚偶，idea viewport其實(shí)就是改變了尺寸layout viewport批销，idae viewport其實(shí)就是把layoutviewport調(diào)整到一個合適的，理想的狀態(tài)染坯，使頁面在移動端有最佳的顯示效果均芽，即無論在何種分辨率的屏幕下，那些針對ideal viewport 而設(shè)計的網(wǎng)站单鹿，不需要用戶手動縮放掀宋，也不需要橫向滾動條就可以完美地呈現(xiàn)給用戶。那么如何把layout viewport調(diào)整到idea viewport呢仲锄，下面我們來看一下：
把當(dāng)前的viewport寬度設(shè)置為 ideal viewport 的寬度
怎么設(shè)置呢劲妙？看看這段代碼：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
相信有做過移動端開發(fā)的同學(xué)都熟悉這段代碼，不管你是不是熟悉移動端開發(fā)的原理儒喊，像我之前一樣镣奋，不懂viewport，像素是啥怀愧，但是我把這段代碼寫進(jìn)了haed標(biāo)簽里侨颈，其實(shí)就成功了一半。
沒錯芯义，這段代碼就是把把默認(rèn)的layout viewport的寬度設(shè)為移動設(shè)備的屏幕寬度肛搬，也就是把當(dāng)前的viewport寬度設(shè)置為 ideal viewport 的寬度。
我們來看看各個屬性是什么意思：
- 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代表允許
這些屬性可以同時使用，也可以單獨(dú)使用或混合使用聊替，多個屬性同時使用時用逗號隔開就行了楼肪。
width=device-width
width屬性被用來控制layout viewport（布局視口）的寬度，layout viewport（布局視口）寬度默認(rèn)值是設(shè)備廠家指定的惹悄。iOS, Android基本都將這個視口分辨率設(shè)置為 980px春叫。我們可以 width=320 這樣設(shè)為確切的像素數(shù)，也可以設(shè)為device-width這一特殊值泣港，一般為了自適應(yīng)布局暂殖，普遍的做法是將width設(shè)置為device-width，width=device-width 也就是將layout viewport（布局視口）的寬度設(shè)置 ideal viewport（理想視口）的寬度当纱。
<meta name="viewport" content="width=device-width">
可以看到通過width=device-width呛每，所有瀏覽器都能把當(dāng)前的viewport寬度變成ideal viewport的寬度，但要注意的是坡氯，在iphone和ipad上晨横，無論是豎屏還是橫屏，寬度都是豎屏?xí)rideal viewport的寬度廉沮。
initial-scale=1
initial-scale用于指定頁面的初始縮放比例颓遏，縮放是相對于 ideal viewport來進(jìn)行縮放的，因此當(dāng)initial-scale=1時滞时，表示將layout viewport的寬度設(shè)置為 ideal viewport的寬度叁幢。
<meta name="viewport" content="initial-scale=1" />
可以知道initial-scale=1 也能把當(dāng)前的viewport寬度變成 ideal viewport 的寬度，但這次輪到了windows phone 上的IE 無論是豎屏還是橫屏都把寬度設(shè)為豎屏?xí)rideal viewport的寬度坪稽。
綜上曼玩，要把當(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">
width 和 initial-scale=1同時出現(xiàn)，并且還出現(xiàn)了沖突呢
當(dāng)遇到這種情況時钓账，瀏覽器會取它們兩個中較大的那個值垒手。例如胡嘿，當(dāng)width=400，ideal viewport的寬度為320時停做，取的是400晤愧；當(dāng)width=400， ideal viewport的寬度為480時雅宾，取的是ideal viewport的寬度养涮。
關(guān)于minimum-scale=1, maximum-scale=1葵硕，user-scalable=no
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
可以看到第二段代碼我們把minimum-scale=1, maximum-scale=1這兩個屬性去掉了眉抬，但效果是一樣的，因為添加了user-scalable=no 那么懈凹，minimum-scale=1, maximum-scale=1這兩個屬性就沒必要追加了蜀变。因為你都已經(jīng)禁止了用戶縮放頁面了，允許的縮放范圍也就不存在了介评。
總結(jié)
所有的scale指令都是相對于ideal viewport的库北。無視layout viewport設(shè)置了多少，所以maximum-scale=3意味著最大的縮放值是ideal viewport的300%
layout viewport能被設(shè)置成ideal viewport们陆。width=device-width和initial-scale=1指令可以做到寒瓦。
針對某個設(shè)備的ideal viewport而做出的網(wǎng)站，在其他設(shè)備上的表現(xiàn)也不會相差非常多甚至是表現(xiàn)一樣的坪仇，這是因為市場上雖然有不同分辨率杂腰，不同型號的手機(jī)，但是他們的ideal viewport是十分接近的椅文。
ideal viewport會隨設(shè)備轉(zhuǎn)向而改變喂很。如Iphone 5s 尺寸為320*568。在豎屏模式下寬度為320px皆刺，而在橫屏模式下寬度為568px少辣。
參考文章
（寫到這里要吐血了哈哈）
