什么是 Viewport?viewport 是用戶網頁的可視區域。

viewport 翻譯為中文可以叫做”視區"。

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

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

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

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

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

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

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

開發移動端頁面時，我們最常見的一個寫法就是在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端網站，在沒有手動縮放的情況下，頁面會自動縮小到適合手機的屏幕的尺寸？

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

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

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

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

總結

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

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