當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

深入理解viewport

發布時間：2024/8/26 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了深入理解viewport 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這篇文章我已寫成pdf，建議直接下載瀏覽。

鏈接：https://pan.baidu.com/s/1c4cwd7E 密碼：jty1

《對viewport標簽的理解》

——版權所有 @RYZZ

https://www.cnblogs.com/ryzz/

如轉載或引用請加上該鏈接！

前言：（必讀）

前端的小朋友們多多少少接觸過這個標簽，網上有很多關于這個標簽的解釋，但是無疑千篇一律，你不禁都會懷疑他們是不是相互抄襲的。

這篇文章是我自己對這個標簽以及瀏覽器對網頁渲染機制的一個理解（可能有誤，但至少根據這樣的理解能夠說通該標簽各種情況的原因）。

推薦使用Chrome開發者工具的移動端模擬器來測試該標簽，這樣編輯預覽都很方便，當然我這篇文章的測試都是經過安卓（華為P10）和iOS（iPhone7）測試過的。

文章提出了一些自定義概念（雙下劃線表示），如果在學習中自己總結某個概念有助于你學習，是很好的習慣。

如果你對這篇文章有錯誤之處，懇請指正，但不要帶上臟話，謝謝。

一、標簽用法及其屬性（ P2 ）

二、幾個專業術語 ( P3 )

三、PC上vp機制和網頁渲染原理 ( P4 )

四、移動端上vp機制和網頁渲染原理 ( P6 )

標簽一般用法：（不需要過多參數，我覺得用戶還是需要自己的操作空間，當然如果你是想用HTML5開發混合應用，建議加上最大、小縮放和禁止用戶縮放）

屬性：（屬性各自作用不說了，百度一堆）

width:a value(px) | device-width

initial-scale 范圍是(0.0, 10.0]

minimum-scale 同上

maximum-scale 同上

user-scalable “yes”?| “no”

來認識幾個與屏幕（包括手機屏幕，電腦屏幕，平板屏幕等等）有關的術語：

(1)?尺寸（單位：inch，即英寸）：就是我們俗話說的你的手機是幾寸的，它的大小是你手機對角線的長度。

(2)?分辨率（單位：px，即像素）：指你手機的寬 ×?高，比如iPhone7的分辨率就是750 ×?1334px

(3)?像素密度（單位：dpi(dot per inch)或ppi(pixel per inch)，安卓習慣用前者而蘋果習慣用后者）：對角線的像素個數除以對角線長，比如iPhone7的ppi = √(750²+1334²) / 4.7 ≈327。

(4)?設備像素（單位：px）：指的是組成屏幕的最小的單位，比如iPhone7水平就有750個設備像素，有時也稱為像素點或點。

(5)?設備獨立像素（單位：dp）：簡稱dip（device independence pixel），是一種虛擬像素，CSS中的px單位就是一種設備獨立像素，它能保證使用同一種設備獨立像素單位的相同值在不同設備上顯示的大小差不多。（如果我沒講清楚的話，這個你可以百度了解一下）

(6)?設備像素比（無單位，是個比值）：簡稱dpr（device pixel ratio），指該設備上一個設備獨立像素等于多少設備像素，比如CSS在iPhone7中，1px（這個px是設備獨立像素的一種單位） = ?2px（這個px是設備像素，就是iPhone7上的像素點）。使用window.devicePixelRatio屬性來獲取CSS的一個px（設備獨立像素）在該設備上等于多少個px（設備像素），即設備像素比。

(7)?viewport：簡稱vp，我們不做中文翻譯，下面用圖片來說明。（因為我覺得做了翻譯反而會依據表面意思被誤導，如果你有強迫癥，我建議你翻譯成“網頁渲染圖層”）

我們現在來了解一下PC上瀏覽器渲染網頁的原理，這會有助于我們了解什么是vp以及移動端的布局原理。

看下圖：（畫的有點抽象，盡量去理解）

圖中有個瀏覽器（有URL地址欄和三個黑色橢圓的那個大矩形就是），瀏覽器中淡藍色部分就是我們瀏覽器顯示網頁的那個窗口（即window，html和window是重合的，但是body有8px的margin），而淡綠色的就是vp。這幅圖顯示的是網頁過寬時候，我們拖動水平滾動條的滑塊看頁面時候的情況（淡藍色底下有個黑色的實心矩形，就是滑塊）。

如果你對window, html, body之間的默認布局不了解的話，建議先看下下圖：

說明了：html（黑色線框）默認和window是重合的（去掉邊框的話），body其實可以看做一個div元素，那么body也應該是獨占一行（塊級元素的霸氣所在），所以紅色線框的body也是獨占一行的（注意body自帶margin:8px，所以它與html有邊距），然后再是綠色線框的div，同樣獨占一行。

對vp在PC瀏覽器上工作原理的歸納：

在PC上，vp默認和window（即瀏覽器窗口，它等價“瀏覽器可顯示網頁的區域”以及“瀏覽器可見區域”，這四個名詞都是同個概念！）重合，也就是說vp的默認寬高就是window的寬高。

再來說個概念，網頁內容最小寬：網頁能夠正常呈現的最小寬度

<style>

div{float:left}

.a{width:220px;height:100px;background:yellow}

.b{width:10%;height:100px;background:red}

</style>

<body>

</body>

如果瀏覽器窗口最大寬度為1000px（當前瀏覽器窗口的寬度，可以通過window.innerWidth獲得），那么這個網頁的最小寬就是220px + 1000px * 0.1 = 320px。

如果一個網頁內容最小寬等于或小于body的width時，我們稱這種布局為合理布局（如果body里面的元素最小寬之和不超過body，那么我們看網頁就不需要水平移動了，直接從上往下瀏覽即可，瀏覽就很輕松很人性化，所以稱之為合理布局），否則如果超過body的width（這時稱為異常布局），這時vp的寬會被迫放大，直到剛好包裹住網頁的內容的最小寬，然后再放入瀏覽器的window中，所以就會在底部出現水平滾動條。上面說了如果網頁內容最小寬大于body時會有水平滾動條，那么如果網頁內容的高（一般來說網頁元素的高不會設置百分比）大于vp的高（vp的高默認就是當前window的高，前面說過），那么就會出現垂直滾動條。（body的高是不會像寬一樣被撐破的）

也就是說，網頁都是渲染到vp上去的，然后把vp放到瀏覽器窗口中給用戶顯示。

最后我們來說移動端的瀏覽器網頁渲染原理：（以iPhone7為例）

在不加viewport標簽時，此時iPhone7的vp寬默認980px，高默認1744px。（這個vp的寬比高就是iPhone7手機的分辨率寬比高值，都約等于0.56，有木有發現。但這點要和PC端的vp區別開，PC端的vp的高寬不受比例約束！）這時，會和PC端一樣，在這個980px寬的vp的body（手機上body還是有8px的外邊距）中加入網頁內容，并且一般不超過body（即合理布局），網頁在vp中渲染好之后，縮小這個vp使得vp的高和手機瀏覽器可見區域高一樣時為止，所以你一般點開沒有做移動端優化的網站都是一個被縮小過的網頁。但是，如果這個網頁是個異常布局呢？即網頁內容最小寬超過了body，那么這個vp會被迫放大（沒錯和PC端一樣）到剛好包裹住網頁內容最小寬，這時vp就大于980px了，那么手機瀏覽器該如何縮放呢？還是一樣，異常布局只是影響了vp的寬，沒有影響vp的高，所以還是縮小到vp的高和手機瀏覽器窗口（這里用了窗口，即window，它也等價于瀏覽器可見區域，不要搞混了，同個東西，上面說過）的高一樣為止了，這意味著這時手機瀏覽器底部會有一個水平滾動條，就是用來滑動來看超出的那些部分（即異常布局的超過body的部分）。

很抽象？看下圖：

矩形A表示手機瀏覽器窗口，iPhone7的是375px

矩形B表示iPhone7的默認vp

矩形C表示一個異常布局網頁，它的最小寬大于vp的寬，所以默認的vp寬會被放大至剛好包裹住網頁的最小寬（紅色箭頭所示），但是vp的高不會被相應放大（就變成了紅色線框的矩形大小）。這時，異常布局的網頁在vp渲染好了，然后要放入窗口里了，它會被縮小，直到vp的高和窗口的高一樣，這樣就會出現一個問題，異常布局的網頁超出body（即超出默認vp寬）的內容會顯示在窗口外，所以瀏覽器地不會出現一個滾動條，來看這異常的部分。

嘮嘮叨叨那么多，那么加上viewport標簽呢？這還簡單了？

如果設置為width=device-width，意味著把默認vp按比例變成窗口寬的大小。（注意，vp的寬高都是被約束的，縮放寬時高也會被縮放，縮放高時寬也會被縮放，但是上面講到的在異常布局中除外）這時，vp將與窗口重合。那么，如果是個合理布局的網頁，那么顯示出來的就是一個很標準的移動優化的網頁，反之，如果是個異常布局，那么vp是不會再縮小的，因為vp的高已經和窗口高一樣了，但是vp的寬卻要包裹住異常布局的網頁的最小寬，所以vp的寬會大于device-width指定的值（在iPhone7上為375px），所以會加上水平滾動條。同樣，這個異常布局的網頁的vp的寬高的縮放就不會被比例約束，因為它的寬是被迫縮放的。

如果設置的width大于device-width，比如設置個500px，那么vp的寬就是500px，高等比例放大為585 * (500/375) = 780px。（585px是width=375px時的vp高）這時的網頁渲染原理不就和不加viewport一樣嘛？合理布局就縮小vp使得vp高等于窗口高；異常布局會增大vp的寬，但是vp的高不會等比例增大（因為vp的寬是被迫增大的），然后在縮小vp使得vp高等于窗口高，并且出現水平滾動條。

如果設置的width小于device-width，比如設個200px，那么vp寬高就是200px ×?(200 / 375 * 585）px，然后再是看是否是合理布局，是的話等比例放大使得vp高等于窗口高，不是的話，就增加vp的寬，然后再等比例放大使得vp高等于窗口高，同樣地，會出現水平滾動條。

2018年1月31日

轉載于:https://www.cnblogs.com/ryzz/p/8397460.html

總結

以上是生活随笔為你收集整理的深入理解viewport的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

viewport

上一篇： TuShare获取K线数据
下一篇： 02: MySQL的安装与基本配置