深入理解viewport
這篇文章我已寫成pdf，建議直接下載瀏覽。
鏈接：https://pan.baidu.com/s/1c4cwd7E 密碼：jty1
《對(duì)viewport標(biāo)簽的理解》
——版權(quán)所有 @RYZZ
https://www.cnblogs.com/ryzz/
如轉(zhuǎn)載或引用請(qǐng)加上該鏈接！
前言：（必讀）
前端的小朋友們多多少少接觸過這個(gè)標(biāo)簽，網(wǎng)上有很多關(guān)于這個(gè)標(biāo)簽的解釋，但是無疑千篇一律，你不禁都會(huì)懷疑他們是不是相互抄襲的。
這篇文章是我自己對(duì)這個(gè)標(biāo)簽以及瀏覽器對(duì)網(wǎng)頁渲染機(jī)制的一個(gè)理解（可能有誤，但至少根據(jù)這樣的理解能夠說通該標(biāo)簽各種情況的原因）。
推薦使用Chrome開發(fā)者工具的移動(dòng)端模擬器來測(cè)試該標(biāo)簽，這樣編輯預(yù)覽都很方便，當(dāng)然我這篇文章的測(cè)試都是經(jīng)過安卓（華為P10）和iOS（iPhone7）測(cè)試過的。
文章提出了一些自定義概念（雙下劃線表示），如果在學(xué)習(xí)中自己總結(jié)某個(gè)概念有助于你學(xué)習(xí)，是很好的習(xí)慣。
如果你對(duì)這篇文章有錯(cuò)誤之處，懇請(qǐng)指正，但不要帶上臟話，謝謝。
?
目錄：
?
一、標(biāo)簽用法及其屬性 （ P2 ）
二、幾個(gè)專業(yè)術(shù)語 ( P3 )
三、PC上vp機(jī)制和網(wǎng)頁渲染原理 ( P4 )
四、移動(dòng)端上vp機(jī)制和網(wǎng)頁渲染原理 ( P6 )
?
?
標(biāo)簽一般用法：（不需要過多參數(shù)，我覺得用戶還是需要自己的操作空間，當(dāng)然如果你是想用HTML5開發(fā)混合應(yīng)用，建議加上最大、小縮放和禁止用戶縮放）
<meta name=”viewport”?content=”width=device-width”>
屬性：（屬性各自作用不說了，百度一堆）
width:a value(px) | device-width
initial-scale 范圍是(0.0, 10.0]
minimum-scale 同上
maximum-scale 同上
user-scalable “yes”?| “no”
?
來認(rèn)識(shí)幾個(gè)與屏幕（包括手機(jī)屏幕，電腦屏幕，平板屏幕等等）有關(guān)的術(shù)語：
(1)?尺寸（單位：inch，即英寸）：就是我們俗話說的你的手機(jī)是幾寸的，它的大小是你手機(jī)對(duì)角線的長(zhǎng)度。
(2)?分辨率（單位：px，即像素）：指你手機(jī)的寬 ×?高，比如iPhone7的分辨率就是750 ×?1334px
(3)?像素密度（單位：dpi(dot per inch)或ppi(pixel per inch)，安卓習(xí)慣用前者而蘋果習(xí)慣用后者）：對(duì)角線的像素個(gè)數(shù)除以對(duì)角線長(zhǎng)，比如iPhone7的ppi = √(7502+13342) / 4.7 ≈327。
(4)?設(shè)備像素（單位：px）：指的是組成屏幕的最小的單位，比如iPhone7水平就有750個(gè)設(shè)備像素，有時(shí)也稱為像素點(diǎn)或點(diǎn)。
(5)?設(shè)備獨(dú)立像素（單位：dp）：簡(jiǎn)稱dip（device independence pixel），是一種虛擬像素，CSS中的px單位就是一種設(shè)備獨(dú)立像素，它能保證使用同一種設(shè)備獨(dú)立像素單位的相同值在不同設(shè)備上顯示的大小差不多。（如果我沒講清楚的話，這個(gè)你可以百度了解一下）
(6)?設(shè)備像素比（無單位，是個(gè)比值）：簡(jiǎn)稱dpr（device pixel ratio），指該設(shè)備上一個(gè)設(shè)備獨(dú)立像素等于多少設(shè)備像素，比如CSS在iPhone7中，1px（這個(gè)px是設(shè)備獨(dú)立像素的一種單位） = ?2px（這個(gè)px是設(shè)備像素，就是iPhone7上的像素點(diǎn)）。使用window.devicePixelRatio屬性來獲取CSS的一個(gè)px（設(shè)備獨(dú)立像素）在該設(shè)備上等于多少個(gè)px（設(shè)備像素），即設(shè)備像素比。
(7)?viewport：簡(jiǎn)稱vp，我們不做中文翻譯，下面用圖片來說明。（因?yàn)槲矣X得做了翻譯反而會(huì)依據(jù)表面意思被誤導(dǎo)，如果你有強(qiáng)迫癥，我建議你翻譯成“網(wǎng)頁渲染圖層”）
?
?
我們現(xiàn)在來了解一下PC上瀏覽器渲染網(wǎng)頁的原理，這會(huì)有助于我們了解什么是vp以及移動(dòng)端的布局原理。
看下圖：（畫的有點(diǎn)抽象，盡量去理解）
?
圖中有個(gè)瀏覽器（有URL地址欄和三個(gè)黑色橢圓的那個(gè)大矩形就是），瀏覽器中淡藍(lán)色部分就是我們?yōu)g覽器顯示網(wǎng)頁的那個(gè)窗口（即window，html和window是重合的，但是body有8px的margin），而淡綠色的就是vp。這幅圖顯示的是網(wǎng)頁過寬時(shí)候，我們拖動(dòng)水平滾動(dòng)條的滑塊看頁面時(shí)候的情況（淡藍(lán)色底下有個(gè)黑色的實(shí)心矩形，就是滑塊）。
?
如果你對(duì)window, html, body之間的默認(rèn)布局不了解的話，建議先看下下圖：
說明了：html（黑色線框）默認(rèn)和window是重合的（去掉邊框的話），body其實(shí)可以看做一個(gè)div元素，那么body也應(yīng)該是獨(dú)占一行（塊級(jí)元素的霸氣所在），所以紅色線框的body也是獨(dú)占一行的（注意body自帶margin:8px，所以它與html有邊距），然后再是綠色線框的div，同樣獨(dú)占一行。
?
?
對(duì)vp在PC瀏覽器上工作原理的歸納：
在PC上，vp默認(rèn)和window（即瀏覽器窗口，它等價(jià)“瀏覽器可顯示網(wǎng)頁的區(qū)域”以及“瀏覽器可見區(qū)域”，這四個(gè)名詞都是同個(gè)概念！）重合，也就是說vp的默認(rèn)寬高就是window的寬高。
再來說個(gè)概念，網(wǎng)頁內(nèi)容最小寬：網(wǎng)頁能夠正常呈現(xiàn)的最小寬度
<style>
div{float:left}
.a{width:220px;height:100px;background:yellow}
.b{width:10%;height:100px;background:red}
</style>
<body>
<div class=”a”></div><div class=”b”</div>
</body>
如果瀏覽器窗口最大寬度為1000px（當(dāng)前瀏覽器窗口的寬度，可以通過window.innerWidth獲得），那么這個(gè)網(wǎng)頁的最小寬就是220px + 1000px * 0.1 = 320px。
?
如果一個(gè)網(wǎng)頁內(nèi)容最小寬等于或小于body的width時(shí)，我們稱這種布局為合理布局（如果body里面的元素最小寬之和不超過body，那么我們看網(wǎng)頁就不需要水平移動(dòng)了，直接從上往下瀏覽即可，瀏覽就很輕松很人性化，所以稱之為合理布局），否則如果超過body的width（這時(shí)稱為異常布局），這時(shí)vp的寬會(huì)被迫放大，直到剛好包裹住網(wǎng)頁的內(nèi)容的最小寬，然后再放入瀏覽器的window中，所以就會(huì)在底部出現(xiàn)水平滾動(dòng)條。上面說了如果網(wǎng)頁內(nèi)容最小寬大于body時(shí)會(huì)有水平滾動(dòng)條，那么如果網(wǎng)頁內(nèi)容的高（一般來說網(wǎng)頁元素的高不會(huì)設(shè)置百分比）大于vp的高（vp的高默認(rèn)就是當(dāng)前window的高，前面說過），那么就會(huì)出現(xiàn)垂直滾動(dòng)條。（body的高是不會(huì)像寬一樣被撐破的）
也就是說，網(wǎng)頁都是渲染到vp上去的，然后把vp放到瀏覽器窗口中給用戶顯示。
?
?
最后我們來說移動(dòng)端的瀏覽器網(wǎng)頁渲染原理：（以iPhone7為例）
在不加viewport標(biāo)簽時(shí)，此時(shí)iPhone7的vp寬默認(rèn)980px，高默認(rèn)1744px。（這個(gè)vp的寬比高就是iPhone7手機(jī)的分辨率寬比高值，都約等于0.56，有木有發(fā)現(xiàn)。但這點(diǎn)要和PC端的vp區(qū)別開，PC端的vp的高寬不受比例約束！）這時(shí)，會(huì)和PC端一樣，在這個(gè)980px寬的vp的body（手機(jī)上body還是有8px的外邊距）中加入網(wǎng)頁內(nèi)容，并且一般不超過body（即合理布局），網(wǎng)頁在vp中渲染好之后，縮小這個(gè)vp使得vp的高和手機(jī)瀏覽器可見區(qū)域高一樣時(shí)為止，所以你一般點(diǎn)開沒有做移動(dòng)端優(yōu)化的網(wǎng)站都是一個(gè)被縮小過的網(wǎng)頁。但是，如果這個(gè)網(wǎng)頁是個(gè)異常布局呢？即網(wǎng)頁內(nèi)容最小寬超過了body，那么這個(gè)vp會(huì)被迫放大（沒錯(cuò)和PC端一樣）到剛好包裹住網(wǎng)頁內(nèi)容最小寬，這時(shí)vp就大于980px了，那么手機(jī)瀏覽器該如何縮放呢？還是一樣，異常布局只是影響了vp的寬，沒有影響vp的高，所以還是縮小到vp的高和手機(jī)瀏覽器窗口（這里用了窗口，即window，它也等價(jià)于瀏覽器可見區(qū)域，不要搞混了，同個(gè)東西，上面說過）的高一樣為止了，這意味著這時(shí)手機(jī)瀏覽器底部會(huì)有一個(gè)水平滾動(dòng)條，就是用來滑動(dòng)來看超出的那些部分（即異常布局的超過body的部分）。
很抽象？看下圖：
?
矩形A表示手機(jī)瀏覽器窗口，iPhone7的是375px
矩形B表示iPhone7的默認(rèn)vp
矩形C表示一個(gè)異常布局網(wǎng)頁，它的最小寬大于vp的寬，所以默認(rèn)的vp寬會(huì)被放大至剛好包裹住網(wǎng)頁的最小寬（紅色箭頭所示），但是vp的高不會(huì)被相應(yīng)放大（就變成了紅色線框的矩形大小）。這時(shí)，異常布局的網(wǎng)頁在vp渲染好了，然后要放入窗口里了，它會(huì)被縮小，直到vp的高和窗口的高一樣，這樣就會(huì)出現(xiàn)一個(gè)問題，異常布局的網(wǎng)頁超出body（即超出默認(rèn)vp寬）的內(nèi)容會(huì)顯示在窗口外，所以瀏覽器地不會(huì)出現(xiàn)一個(gè)滾動(dòng)條，來看這異常的部分。
?
嘮嘮叨叨那么多，那么加上viewport標(biāo)簽?zāi)?#xff1f;這還簡(jiǎn)單了？
如果設(shè)置為width=device-width，意味著把默認(rèn)vp按比例變成窗口寬的大小。（注意，vp的寬高都是被約束的，縮放寬時(shí)高也會(huì)被縮放，縮放高時(shí)寬也會(huì)被縮放，但是上面講到的在異常布局中除外）這時(shí)，vp將與窗口重合。那么，如果是個(gè)合理布局的網(wǎng)頁，那么顯示出來的就是一個(gè)很標(biāo)準(zhǔn)的移動(dòng)優(yōu)化的網(wǎng)頁，反之，如果是個(gè)異常布局，那么vp是不會(huì)再縮小的，因?yàn)関p的高已經(jīng)和窗口高一樣了，但是vp的寬卻要包裹住異常布局的網(wǎng)頁的最小寬，所以vp的寬會(huì)大于device-width指定的值（在iPhone7上為375px），所以會(huì)加上水平滾動(dòng)條。同樣，這個(gè)異常布局的網(wǎng)頁的vp的寬高的縮放就不會(huì)被比例約束，因?yàn)樗膶捠潜黄瓤s放的。
如果設(shè)置的width大于device-width，比如設(shè)置個(gè)500px，那么vp的寬就是500px，高等比例放大為585 * (500/375) = 780px。（585px是width=375px時(shí)的vp高）這時(shí)的網(wǎng)頁渲染原理不就和不加viewport一樣嘛？合理布局就縮小vp使得vp高等于窗口高；異常布局會(huì)增大vp的寬，但是vp的高不會(huì)等比例增大（因?yàn)関p的寬是被迫增大的），然后在縮小vp使得vp高等于窗口高，并且出現(xiàn)水平滾動(dòng)條。
如果設(shè)置的width小于device-width，比如設(shè)個(gè)200px，那么vp寬高就是200px ×?(200 / 375 * 585）px，然后再是看是否是合理布局，是的話等比例放大使得vp高等于窗口高，不是的話，就增加vp的寬，然后再等比例放大使得vp高等于窗口高，同樣地，會(huì)出現(xiàn)水平滾動(dòng)條。
?
2018年1月31日
轉(zhuǎn)載于:https://www.cnblogs.com/ryzz/p/8397460.html
總結(jié)
以上是生活随笔為你收集整理的深入理解viewport的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TuShare获取K线数据
- 下一篇： 02: MySQL的安装与基本配置