三個(gè) viewport
ppk大神對(duì)于移動(dòng)設(shè)備上的 viewport 有著非常多的研究（第一篇包帚，第二篇若皱，第三篇）所计，有興趣的同學(xué)可以去看一下柠辞。ppk認(rèn)為，移動(dòng)設(shè)備上有三個(gè) viewport主胧。
viewport簡介
viewport 特性叭首，一個(gè)移動(dòng)專屬的Meta值习勤，用于定義視口的各種行為。
該特性最先由Apple引入放棒，用于解決移動(dòng)端的頁面展示問題姻报，后續(xù)被越來越多的廠商跟進(jìn)。
舉個(gè)簡單的例子來講為什么會(huì)需要它：
我們知道用戶大規(guī)模使用手機(jī)等移動(dòng)設(shè)備來進(jìn)行網(wǎng)頁瀏覽器间螟，其實(shí)得益于智能手持設(shè)備的興起吴旋，也就是近幾年的事。（還記得不久前的幾年厢破，滿大街都還是諾基亞的天下么荣瑟？）
這時(shí)有一個(gè)很現(xiàn)實(shí)的問題擺在了廠商面前，用戶并不能很好地通過手機(jī)等設(shè)備訪問網(wǎng)頁摩泪，因?yàn)槠聊惶 ?/p>
Apple也發(fā)現(xiàn)了這個(gè)問題笆焰，并且適時(shí)的出現(xiàn)，它提出了一個(gè)方案用來解決這個(gè)問題见坑。在iOS Safari中定義了一個(gè) viewport meta 標(biāo)簽嚷掠，用來創(chuàng)建一個(gè)虛擬的布局視口（layout viewport），而這個(gè)視口的分辨率接近于PC顯示器荞驴，Apple將其定義為 980px不皆。
布局視窗（layout 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ì)問枕磁，現(xiàn)在不是有很多手機(jī)分辨率都非常大嗎，比如768x1024术吝，或者 1080x1920 這樣透典，那這樣的手機(jī)用來顯示為桌面瀏覽器設(shè)計(jì)的網(wǎng)站是沒問題的吧？前面我們已經(jīng)說了顿苇，css中的1px并不是代表屏幕上的1px，你分辨率越大税弃，css中1px代表的物理像素就越多纪岁，devicePixelRatio的值也越大，這很好理解则果，因?yàn)槟惴直媛试龃罅酸：玻聊怀叽绮]有變大多少漩氨，必須讓css中的1px代表更多的物理像素，才能讓1px的東西在屏幕上的大小與那些低分辨率的設(shè)備差不多遗增，不然就會(huì)因?yàn)樘《床磺褰芯Ｋ栽?1080x1920 這樣的設(shè)備上，在默認(rèn)情況下做修，也許你只要把一個(gè)div的寬度設(shè)為300多px（視devicePixelRatio的值而定）霍狰，就是滿屏的寬度了∈渭埃回到正題上來蔗坯，如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為 viewport 的話，某些網(wǎng)站就會(huì)因?yàn)?viewport 太窄而顯示錯(cuò)亂燎含，所以這些瀏覽器就決定默認(rèn)情況下把 viewport 設(shè)為一個(gè)較寬的值宾濒，比如980px，這樣的話即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了屏箍。瀏覽器默認(rèn)的 viewport 叫做 layout viewport绘梦。
布局視窗表示的是瀏覽器默認(rèn)的 viewport，一般情況下這個(gè)寬度要大于瀏覽器可視區(qū)域?qū)挾取?/p>
這是一個(gè)虛擬的窗口赴魁，其大小比手機(jī)屏幕大卸奉，加載網(wǎng)頁時(shí)，直接把HTML渲染在這個(gè)虛擬的窗口中尚粘，這樣就不會(huì)樣式錯(cuò)亂了择卦。在查看的時(shí)候，畢竟手機(jī)的 visual viewport 小啊郎嫁，那就只能通過滾動(dòng)條來看了秉继。
打個(gè)比喻，layout viewport 就是一張大白紙泽铛，HTML的內(nèi)容就寫在這個(gè)大白紙上尚辑，visual viewport 就是一個(gè)放大鏡，上下左右移動(dòng)盔腔，可以顯示其中的一部分杠茬。
layout viewport 的寬度可以通過 document.documentElement.clientWidth 來獲取。
視覺視窗（visual viewport）
所謂的視覺視窗說白了就是設(shè)備的屏幕區(qū)域弛随，換句話說就是用戶通過屏幕所看到的頁面內(nèi)容瓢喉。但它所對(duì)應(yīng)的并不是指屏幕區(qū)域里的物理像素，而是CSS 像素舀透。并且它所包含的 CSS 像素的數(shù)量也是隨著用戶縮放而有所改變栓票。
visual viewport 的尺寸不會(huì)是一個(gè)固定的值，甚至每款設(shè)備都可能不同愕够。大致列幾種常見設(shè)備的 visual viewport 尺寸：
- iPhone4~iPhone5S: 320*480px
- iPhone6~iPhone6S: 375*627px
- iPhone6 Plus~iPhone6S Plus: 414*736px
以 iPhone4S 為例走贪，會(huì)在其 320px 的 visual viewport 上佛猛，創(chuàng)建一個(gè)寬 980px 的 layout viewport，于是用戶可以在 visual viewport 中拖動(dòng)或者縮放網(wǎng)頁坠狡，來獲得良好的瀏覽效果继找；布局視口用來配合CSS渲染布局，當(dāng)我們定義一個(gè)容器的寬度為100%時(shí)逃沿，這個(gè)容器的實(shí)際寬度是 980px 而不是 320px婴渡，通過這種方式大部分網(wǎng)頁就能以縮放的形式正常顯示在手機(jī)屏幕上了。
然而感挥，layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的缩搅，所以我們還需要一個(gè) viewport 來代表瀏覽器可視區(qū)域的大小，把這個(gè) viewport 叫做 visual viewport触幼。visual viewport 的寬度可以通過 window.innerWidth 來獲取硼瓣。
理想視窗（ideal viewport）
已經(jīng)有兩個(gè) viewport 了：layout viewport 和 visual viewport。但瀏覽器覺得還不夠置谦，因?yàn)楝F(xiàn)在越來越多的網(wǎng)站都會(huì)為移動(dòng)設(shè)備進(jìn)行單獨(dú)的設(shè)計(jì)堂鲤，所以必須還要有一個(gè)能完美適配移動(dòng)設(shè)備的 viewport。所謂的完美適配指的是媒峡，首先不需要用戶縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容瘟栖；第二，顯示的文字的大小是合適谅阿，比如一段14px大小的文字半哟，不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無法看清，理想的情況是這段14px的文字無論是在何種密度屏幕签餐，何種分辨率下寓涨，顯示出來的大小都是差不多的。當(dāng)然氯檐，不只是文字戒良，其他元素像圖片什么的也是這個(gè)道理。這個(gè) viewport 就是 ideal viewport - 移動(dòng)設(shè)備的理想 viewport冠摄。
ideal viewport 并沒有一個(gè)固定的尺寸糯崎，不同的設(shè)備擁有有不同的 ideal viewport。所有的 iphone 的 ideal viewport 寬度都是320px河泳，無論它的屏幕寬度是 320 還是 640沃呢，也就是說，在 iphone 中拆挥，css中的 320px 就代表iphone 屏幕的寬度樟插。
viewport 分為 layout viewport、 visual viewport 和 ideal viewport 三類，其中的 ideal viewport 是最適合移動(dòng)設(shè)備的 viewport黄锤，ideal viewport 的寬度等于移動(dòng)設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為 ideal viewport 的寬度(單位用px)食拜，那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了鸵熟，也就是寬度為100%的效果。ideal viewport 的意義在于负甸，無論在何種分辨率的屏幕下流强，那些針對(duì) ideal viewport 而設(shè)計(jì)的網(wǎng)站，不需要用戶手動(dòng)縮放呻待，也不需要出現(xiàn)橫向滾動(dòng)條打月，都可以完美的呈現(xiàn)給用戶。
利用meta標(biāo)簽對(duì)viewport進(jìn)行控制
移動(dòng)設(shè)備默認(rèn)的 viewport 是 layout viewport蚕捉，也就是那個(gè)比屏幕要寬的 viewport奏篙，但在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開發(fā)時(shí)，我們需要的是 ideal viewport迫淹。那么怎么才能得到 ideal viewport 呢秘通？這就該輪到meta標(biāo)簽出場(chǎng)了。
在開發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)敛熬，最常見的的一個(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è)備的寬度（ideal viewport）肺稀，同時(shí)不允許用戶手動(dòng)縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求应民，但讓 viewport 的寬度等于設(shè)備的寬度话原，這個(gè)應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話诲锹，那就會(huì)使用那個(gè)比屏幕寬的默認(rèn) viewport繁仁，也就是說會(huì)出現(xiàn)橫向滾動(dòng)條。
meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的辕狰，目的就是解決移動(dòng)設(shè)備的 viewport 問題改备。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對(duì) meta viewport 的支持蔓倍，事實(shí)也證明這個(gè)東西還是非常有用的悬钳。
在蘋果的規(guī)范中，meta viewport 有6個(gè)屬性：
要把當(dāng)前的 viewport 寬度設(shè)為 ideal viewport 的寬度偶翅，既可以設(shè)置 width=device-width默勾，也可以設(shè)置 initial-scale=1，但這兩者各有一個(gè)小缺陷聚谁，就是 iphone母剥、ipad 以及IE 會(huì)橫豎屏不分，通通以豎屏的 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">
總結(jié) ：
第一伪阶、如果不設(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è)備的物理寬度沒有關(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">
來得到一個(gè)理想的 viewport（也就是前面說的 ideal viewport ）罩句。
為什么需要有理想的 viewport 呢？比如一個(gè)分辨率為 320x480 的手機(jī)理想viewport 的寬度是 320px敛摘，而另一個(gè)屏幕尺寸相同但分辨率為 640x960 的手機(jī)的理想 viewport 寬度也是為 320px门烂，那為什么分辨率大的這個(gè)手機(jī)的理想寬度要跟分辨率小的那個(gè)手機(jī)的理想寬度一樣呢？這是因?yàn)樾忠挥羞@樣才能保證同樣的網(wǎng)站在不同分辨率的設(shè)備上看起來都是一樣或差不多的屯远。實(shí)際上，現(xiàn)在市面上雖然有那么多不同種類不同品牌不同分辨率的手機(jī)捕虽，但它們的理想 viewport 寬度歸納起來無非也就 320慨丐、360、384泄私、400等幾種房揭，都是非常接近的备闲，理想寬度的相近也就意味著我們針對(duì)某個(gè)設(shè)備的理想 viewport 而做出的網(wǎng)站，在其他設(shè)備上的表現(xiàn)也不會(huì)相差非常多甚至是表現(xiàn)一樣的捅暴。
