移動端H5 viewport

mzlogin 發布于2019-08-21 11:31 / 3053人閱讀

摘要：移動端頁面大家都遇到過的問題。移動端適配方案上移動端適配方案下本文對做一些補充手機屏幕手機屏幕屬于硬件屬性，我們無論是通過還是標簽都是無法影響到它的。很多沒有對移動端做適配的網頁，我們用手機打開，發現網頁被縮小到手機屏幕這么寬了。

移動端頁面大家都遇到過 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 相當于瀏覽器的寬度。
我們是可以通過設置的。
默認情況下，layout viewport 一般為 980px 寬。

document.documentElement.clientWidth 可以獲取 layout viewport 的寬度。

視覺視口 visual viewport

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

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

但是屏幕這 320px 寬，卻可以顯示 980px 寬的內容，所以視覺窗口的寬度是 980px。
很多沒有對移動端做適配的網頁，我們用手機打開，發現網頁被縮小到手機屏幕這么寬了。

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

通過可以設置 visual viewport 的寬度。
visual viewport 的寬度為 screen.width / initial-scale
同時，也會影響到布局視口的寬度，因為布局視口的寬度始終大于等于 visual layout 的寬度。

如果不設置 initial-scale ，iOS設備會自動將 visual viewport 縮放到 布局視口一樣大。

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

屏幕邏輯像素、布局視口、視覺視口三者的關系

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

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

將 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 上面

那么視覺視口和布局視口分別是多寬呢？

最后的最后，終于到了我們耳熟能詳的

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

云服務器 GPU云服務器移動端webrtc h5 H5移動端上傳圖片手機端webrtc h5 視頻直播h5端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86808.html

移動端H5 viewport

摘要：移動端頁面大家都遇到過的問題。移動端適配方案上移動端適配方案下本文對做一些補充手機屏幕手機屏幕屬于硬件屬性，我們無論是通過還是標簽都是無法影響到它的。很多沒有對移動端做適配的網頁，我們用手機打開，發現網頁被縮小到手機屏幕這么寬了。移動端頁面大家都遇到過 viewport 的問題。關于 viewport 的文章有很多了，推薦給大家這兩篇，寫得非常詳細。移動端適配方案(上)移動端適配方案...

CntChen 2019-08-30 15:53 評論0 收藏0
移動端H5 viewport

摘要：移動端頁面大家都遇到過的問題。移動端適配方案上移動端適配方案下本文對做一些補充手機屏幕手機屏幕屬于硬件屬性，我們無論是通過還是標簽都是無法影響到它的。很多沒有對移動端做適配的網頁，我們用手機打開，發現網頁被縮小到手機屏幕這么寬了。移動端頁面大家都遇到過 viewport 的問題。關于 viewport 的文章有很多了，推薦給大家這兩篇，寫得非常詳細。移動端適配方案(上)移動端適配方案...

draveness 2019-08-01 16:27 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

terro 2019-08-29 11:32 評論0 收藏0