什么是 Viewport?viewport 是用戶網(wǎng)頁的可視區(qū)域。

viewport 翻譯為中文可以叫做”視區(qū)"。

手機瀏覽器是把頁面放在一個虛擬的”窗口"(viewport)中，通常這個虛擬的"窗口"(viewport)比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中(這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局)，用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。

簡單點來講：移動設備上的viewport就是屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域。

viewport不局限于瀏覽器可視區(qū)域的大小，一般來講要比瀏覽器的可視區(qū)域要大。

layout viewport:瀏覽器默認的viewport,其寬度寬度可以通過 document.documentElement.clientWidth 來獲取。

visual viewport：瀏覽器可視區(qū)域的大小的寬度，可以通過window.innerWidth 來獲取。

一般來講，移動設備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因為考慮到移動設備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設計的網(wǎng)站，移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px(也可能是其它值，這個是由設備自己決定的)，但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動條，因為瀏覽器可視區(qū)域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度。

很顯然viewport的寬度并不等于設備屏幕的寬度，滾動條和縮放頁面也不是我們想要的效果。那么怎么辦呢？改輪到meta標簽收拾殘局了。

開發(fā)移動端頁面時，我們最常見的一個寫法就是在head標簽中加入：

它的作用就是讓設備的viewport的width等于設備的width;同時禁止了設備的手動縮放功能。

meta viewport 標簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持

在meta viewport 中有6個屬性，如下：

• width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度(單位為縮放為 100% 時的 CSS 的像素)。
• height：和 width 相對應，指定高度。
• initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
• maximum-scale：允許用戶縮放到的最大比例。
• minimum-scale：允許用戶縮放到的最小比例。
• user-scalable：用戶是否可以手動縮放。

可以理解 “width=device-width”的作用就是把viewport的寬度變成了設備的寬度，無論豎屏還是橫屏都一樣,回頭看下為什么我們在手機上打開一個正常的pc端網(wǎng)站，在沒有手動縮放的情況下，頁面會自動縮小到適合手機的屏幕的尺寸？

因為在沒有指定縮放值的情況下，移動設備會自動計算initial-scale的值保證 layout viewport 也就是頁面寬度自動適配瀏覽器的可視寬度。

另外有時候根據(jù)項目需要，我們需要隱藏iOs的上下狀態(tài)欄實現(xiàn)全屏，只需要再meta標簽中加入如下代碼就能輕松實現(xiàn)：

 此屬性只針對 iOS，content只有 yes or no。

最后祝各位在像素世界里玩兒的開心！

總結(jié)

以上是生活随笔為你收集整理的ios开发 微博图片缩放处理错误_H5响应式开发必会之Viewport（视窗）详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。