成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端H5 viewport

CntChen / 2845人閱讀

摘要：移動(dòng)端頁面大家都遇到過的問題。移動(dòng)端適配方案上移動(dòng)端適配方案下本文對(duì)做一些補(bǔ)充手機(jī)屏幕手機(jī)屏幕屬于硬件屬性，我們無論是通過還是標(biāo)簽都是無法影響到它的。很多沒有對(duì)移動(dòng)端做適配的網(wǎng)頁，我們用手機(jī)打開，發(fā)現(xiàn)網(wǎng)頁被縮小到手機(jī)屏幕這么寬了。

移動(dòng)端頁面大家都遇到過 viewport 的問題。關(guān)于 viewport 的文章有很多了，推薦給大家這兩篇，寫得非常詳細(xì)。
移動(dòng)端適配方案(上)
移動(dòng)端適配方案(下)

本文對(duì) viewport 做一些補(bǔ)充

手機(jī)屏幕

手機(jī)屏幕屬于硬件屬性，我們無論是通過 JS 還是 meta 標(biāo)簽都是無法影響到它的。

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

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

手機(jī)屏幕邏輯像素，物理像素經(jīng)過折算之后的像素?cái)?shù)。也就是理想視口的尺寸

iPhone5 屏幕本來是 640px 寬，但是折算成了 320px
iPhone6 物理像素 750px 款，折算成 375px
iPhone6P 略微奇葩一點(diǎn)，物理像素實(shí)際 1080px 寬，但是系統(tǒng)向外暴露的確是 1242px，再折算成了 414px

screen.width/height 可以獲取屏幕的邏輯像素

布局視口 layout viewport

剛才講過的屏幕物理像素和邏輯像素，這些都是手機(jī)廠商設(shè)置好的，我們是無法設(shè)置的，重點(diǎn)再與接下來的兩個(gè)視口，大家千萬別混淆了。

layout viewport 相當(dāng)于瀏覽器的寬度。
我們是可以通過 設(shè)置的。
默認(rèn)情況下，layout viewport 一般為 980px 寬。

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

視覺視口 visual viewport

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

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

但是屏幕這 320px 寬，卻可以顯示 980px 寬的內(nèi)容，所以視覺窗口的寬度是 980px。
很多沒有對(duì)移動(dòng)端做適配的網(wǎng)頁，我們用手機(jī)打開，發(fā)現(xiàn)網(wǎng)頁被縮小到手機(jī)屏幕這么寬了。

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

通過 可以設(shè)置 visual viewport 的寬度。
visual viewport 的寬度為 screen.width / initial-scale
同時(shí)，也會(huì)影響到 布局視口 的寬度，因?yàn)椴季忠暱诘膶挾仁冀K大于等于 visual layout 的寬度。

如果不設(shè)置 initial-scale ，iOS設(shè)備會(huì)自動(dòng)將 visual viewport 縮放到 布局視口一樣大。

還記得默認(rèn)的 布局視口 是多寬嗎？

屏幕邏輯像素、布局視口、視覺視口 三者的關(guān)系

將 layout viewport 的寬度設(shè)置為 屏幕寬

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

將 visual viewport 設(shè)置為 屏幕寬度的 2 倍（正確的理解是：visual viewport 的 0.5 倍是屏幕寬度，所以 visual viewport 的寬度就是屏幕的2倍了）

此時(shí) 布局視口的寬度也是 屏幕寬的2倍，而不再是默認(rèn)的 980px 了

總結(jié)：

1、默認(rèn)情況下 layout viewport 為 980px
2、width=x 設(shè)置布局視口，initial-scale=y 設(shè)置視覺視口
3、如果只設(shè)置 布局視口 和 視覺視口 中的一個(gè)，那么另一個(gè)也是同樣的寬度
4、布局視口 的寬度始終大于等于 視覺視口

舉例 iPhone 5 上面

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

最后的最后，終于到了我們耳熟能詳?shù)?/p>

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116577.html

相關(guān)文章

  • 移動(dòng)端H5 viewport

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

    mzlogin 評(píng)論0 收藏0

  • 移動(dòng)端H5 viewport

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

    draveness 評(píng)論0 收藏0

  • 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn)

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對(duì)應(yīng)的代碼。對(duì)于一個(gè)從零開始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動(dòng)為王的今天，NA開發(fā)在早期占領(lǐng)了大多...

    terro 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<