HTML5行動端-viewport的詳解

行動版頁面大家都曾經遇到 viewport 的問題。關於 viewport 的文章很多了，推薦給大家這兩篇，寫得非常詳細。

本文對viewport 做一些補充

手機螢幕

手機螢幕屬於硬體屬性，我們無論是透過JS 還是meta 標籤都是無法影響它的。

• 手機螢幕物理像素，也就是手機廠商所說的像素、解析度、PPI這些。

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

• #1手機螢幕邏輯

1手機。像素，物理像素經過折算後的像素數。也就是

理想視窗的尺寸
iPhone5 螢幕本來是640px 寬，但是折算成了
320px#iPhone6 物理像素750px款，折算成

375px

iPhone6P 略微奇葩一點，物理像素實際1080px 寬，但是系統向外暴露的確是1242px，再折算成了414px

##screen.width/height

可以取得螢幕的邏輯像素

佈局視窗layout viewport

剛才講過的螢幕物理像素和邏輯像素，這些都是手機廠商設定好的，我們是無法設定的，重點再與接下來的兩個視口，大家千萬別混淆了。

layout viewport 相當於瀏覽器的寬度。 我們是可以透過 827873968358336e94a096e2f1413a99設定的。

預設情況下，layout viewport 一般為 980px 寬。

document.documentElement.clientWidth

可以取得 layout viewport 的寬度。

視覺視窗 visual viewport

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

視覺視窗不太容易理解，雖然手機螢幕的邏輯像素已經固定了，例如 iPhone5 是 320px。
但螢幕這 320px 寬，卻可以顯示 980px 寬的內容，所以視覺視窗的寬度是 980px。 很多沒有對行動端做適配的網頁，我們用手機打開，發現網頁被縮小到手機螢幕這麼寬了。

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

透過 45aa49d6cbf8d22d7b34d2ee5fabc687 可以設定 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 了

總結：

1、默认情况下 layout viewport 为 980px
2、width=x 设置布局视口，initial-scale=y 设置视觉视口
3、如果只设置 布局视口 和 视觉视口 中的一个，那么另一个也是同样的宽度
4、布局视口 的宽度始终大于等于 视觉视口

舉例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 也設定為螢幕寬度，不縮放，螢幕有多寬，就顯示多少像素。 ###也就是所謂的完美視口。 ###

以上是HTML5行動端-viewport的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！