行動版頁面大家都曾經遇到 viewport 的問題。關於 viewport 的文章很多了，推薦給大家這兩篇，寫得非常詳細。
本文對viewport 做一些補充
手機螢幕屬於硬體屬性，我們無論是透過JS 還是meta 標籤都是無法影響它的。
手機螢幕物理像素，也就是手機廠商所說的像素、解析度、PPI這些。
安卓常見的有720X1280 , 1080X1920 等等
iPhone 則是iPhone5 640X1136，iPhone6 750X1334，iPhone6P 1080X1920
#1手機螢幕邏輯
理想視窗的尺寸
iPhone5 螢幕本來是640px 寬，但是折算成了
320px#iPhone6 物理像素750px款，折算成
iPhone6P 略微奇葩一點，物理像素實際1080px 寬，但是系統向外暴露的確是1242px，再折算成了414px
##screen.width/height
可以取得螢幕的邏輯像素
佈局視窗layout viewport
layout viewport 相當於瀏覽器的寬度。 我們是可以透過 設定的。
document.documentElement.clientWidth
可以取得 layout viewport 的寬度。 視覺視窗 visual viewport
視覺視窗可以看作是手機螢幕這麼大的一個窗口，但是它能顯示的像素個數卻不是螢幕上面的這麼多邏輯像素。
視覺視窗不太容易理解，雖然手機螢幕的邏輯像素已經固定了，例如 iPhone5 是 320px。 但螢幕這 320px 寬，卻可以顯示 980px 寬的內容，所以視覺視窗的寬度是 980px。 很多沒有對行動端做適配的網頁，我們用手機打開，發現網頁被縮小到手機螢幕這麼寬了。
重點就在於縮放，縮放讓320px的螢幕能顯示更多內容了。 window.innerWidth 可以取得 visual viewport 的寬度。
visual viewport 的寬度為
screen.width / initial-scale同時，也會影響到 佈局視窗 的寬度，因為佈局視窗的寬度總是大於等於 visual layout 的寬度。如果不设置 initial-scale ，iOS设备会自动将 visual viewport 缩放到 布局视口一样大。
螢幕邏輯像素、佈局視窗、視覺視窗三者的關係
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=640">
<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">
以上是HTML5行動端-viewport的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
