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

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

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

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

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

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

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

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

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

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

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

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

在meta viewport 中有6個(gè)屬性，如下：

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

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

因?yàn)樵跊]有指定縮放值的情況下，移動設(shè)備會自動計(jì)算initial-scale的值保證 layout viewport 也就是頁面寬度自動適配瀏覽器的可視寬度。

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

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

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

總結(jié)

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

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