移動端H5 viewport

移動端頁面你們都遇到過 viewport 的問題。關於 viewport 的文章有不少了，推薦給你們這兩篇，寫得很是詳細。
移動端適配方案(上)
移動端適配方案(下)

本文對 viewport 作一些補充

手機屏幕

手機屏幕屬於硬件屬性，咱們不管是經過 JS 仍是 meta 標籤都是沒法影響到它的。

• 手機屏幕物理像素，也就是手機廠商們說的像素、分辨率、PPI這些。

安卓常見的有 720X1280 , 1080X1920 等等
iPhone 則是 iPhone5 640X1136，iPhone6 750X1334，iPhone6P 1080X1920

• 手機屏幕邏輯像素，物理像素通過折算以後的像素數。也就是理想視口的尺寸

iPhone5 屏幕原本是 640px 寬，可是折算成了 320px
iPhone6 物理像素 750px 款，折算成 375px
iPhone6P 略微奇葩一點，物理像素實際 1080px 寬，可是系統向外暴露的確是 1242px，再折算成了 414px

screen.width/height 能夠獲取屏幕的邏輯像素

佈局視口 layout viewport

剛纔講過的屏幕物理像素和邏輯像素，這些都是手機廠商設置好的，咱們是沒法設置的，重點再與接下來的兩個視口，你們千萬別混淆了。

layout viewport 至關於瀏覽器的寬度。
咱們是能夠經過 <meta name="viewport" content="width=XXX">設置的。
默認狀況下，layout viewport 通常爲 980px 寬。

document.documentElement.clientWidth 能夠獲取 layout viewport 的寬度。

視覺視口 visual viewport

視覺視口能夠看做是手機屏幕這麼大的一個窗口，可是它能顯示的像素個數卻不是屏幕上面的這麼多邏輯像素。

視覺視口不太容易理解，雖然手機屏幕的邏輯像素已經固定了，好比 iPhone5 是 320px。

可是屏幕這 320px 寬，卻能夠顯示 980px 寬的內容，因此視覺窗口的寬度是 980px。
不少沒有對移動端作適配的網頁，咱們用手機打開，發現網頁被縮小到手機屏幕這麼寬了。

重點就在於縮放，縮放讓320px的屏幕能顯示更多內容了。
window.innerWidth 能夠獲取 visual viewport 的寬度。

經過 <meta name="viewport" content="initial-scale=x"> 能夠設置 visual viewport 的寬度。
visual viewport 的寬度爲 screen.width / initial-scale
同時，也會影響到 佈局視口 的寬度，由於佈局視口的寬度始終大於等於 visual layout 的寬度。

若是不設置 initial-scale ，iOS設備會自動將 visual viewport 縮放到 佈局視口同樣大。

還記得默認的 佈局視口 是多寬嗎？

屏幕邏輯像素、佈局視口、視覺視口 三者的關係

<meta name="viewport" content="width=device-width">

將 layout viewport 的寬度設置爲 屏幕寬

<meta name="viewport" content="width=640">

將 layout viewport 寬度設置爲 640px （邏輯像素，而不是物理像素）

<meta name="viewport" content="initial-scale=0.5">

將 visual viewport 設置爲 屏幕寬度的 2 倍（正確的理解是：visual viewport 的 0.5 倍是屏幕寬度，因此 visual viewport 的寬度就是屏幕的2倍了）

此時 佈局視口的寬度也是 屏幕寬的2倍，而再也不是默認的 980px 了

總結：

一、默認狀況下 layout viewport 爲 980px
二、width=x 設置佈局視口，initial-scale=y 設置視覺視口
三、若是隻設置 佈局視口 和 視覺視口 中的一個，那麼另外一個也是一樣的寬度
四、佈局視口 的寬度始終大於等於 視覺視口

舉例 iPhone 5 上面

<meta name="viewport" content="width=600,initial-scale=0.5">

那麼視覺視口和佈局視口分別是多寬呢？

最後的最後，終於到了咱們耳熟能詳的

<meta name="viewport" content="width=device-width,initial-scale=1.0">

你們知道這是什麼意思了吧。layout viewport 瀏覽器窗口，設置爲屏幕寬度。visual viewport 也設置爲屏幕寬度，不縮放，屏幕有多寬，就顯示多少像素。也就是所謂的完美視口。