資訊專(zhuān)欄INFORMATION COLUMN
摘要：移動(dòng)端頁(yè)面大家都遇到過(guò)的問(wèn)題。移動(dòng)端適配方案上移動(dòng)端適配方案下本文對(duì)做一些補(bǔ)充手機(jī)屏幕手機(jī)屏幕屬于硬件屬性，我們無(wú)論是通過(guò)還是標(biāo)簽都是無(wú)法影響到它的。很多沒(méi)有對(duì)移動(dòng)端做適配的網(wǎng)頁(yè)，我們用手機(jī)打開(kāi)，發(fā)現(xiàn)網(wǎng)頁(yè)被縮小到手機(jī)屏幕這么寬了。
移動(dòng)端頁(yè)面大家都遇到過(guò) viewport 的問(wèn)題。關(guān)于 viewport 的文章有很多了，推薦給大家這兩篇，寫(xiě)得非常詳細(xì)。
移動(dòng)端適配方案(上)
移動(dòng)端適配方案(下)
本文對(duì) viewport 做一些補(bǔ)充
手機(jī)屏幕手機(jī)屏幕屬于硬件屬性，我們無(wú)論是通過(guò) JS 還是 meta 標(biāo)簽都是無(wú)法影響到它的。
手機(jī)屏幕物理像素，也就是手機(jī)廠(chǎng)商們說(shuō)的像素、分辨率、PPI這些。
安卓常見(jiàn)的有 720X1280 , 1080X1920 等等
iPhone 則是 iPhone5 640X1136，iPhone6 750X1334，iPhone6P 1080X1920
手機(jī)屏幕邏輯像素，物理像素經(jīng)過(guò)折算之后的像素?cái)?shù)。也就是理想視口的尺寸
iPhone5 屏幕本來(lái)是 640px 寬，但是折算成了 320px
iPhone6 物理像素 750px 款，折算成 375px
iPhone6P 略微奇葩一點(diǎn)，物理像素實(shí)際 1080px 寬，但是系統(tǒng)向外暴露的確是 1242px，再折算成了 414px
screen.width/height 可以獲取屏幕的邏輯像素
布局視口 layout viewport剛才講過(guò)的屏幕物理像素和邏輯像素，這些都是手機(jī)廠(chǎng)商設(shè)置好的，我們是無(wú)法設(shè)置的，重點(diǎn)再與接下來(lái)的兩個(gè)視口，大家千萬(wàn)別混淆了。
layout viewport 相當(dāng)于瀏覽器的寬度。
我們是可以通過(guò) 設(shè)置的。
默認(rèn)情況下，layout viewport 一般為 980px 寬。
document.documentElement.clientWidth 可以獲取 layout viewport 的寬度。
視覺(jué)視口 visual viewport視覺(jué)視口可以看作是手機(jī)屏幕這么大的一個(gè)窗口，但是它能顯示的像素個(gè)數(shù)卻不是屏幕上面的這么多邏輯像素。
視覺(jué)視口不太容易理解，雖然手機(jī)屏幕的邏輯像素已經(jīng)固定了，比如 iPhone5 是 320px。
但是屏幕這 320px 寬，卻可以顯示 980px 寬的內(nèi)容，所以視覺(jué)窗口的寬度是 980px。
很多沒(méi)有對(duì)移動(dòng)端做適配的網(wǎng)頁(yè)，我們用手機(jī)打開(kāi)，發(fā)現(xiàn)網(wǎng)頁(yè)被縮小到手機(jī)屏幕這么寬了。
重點(diǎn)就在于縮放，縮放讓320px的屏幕能顯示更多內(nèi)容了。
window.innerWidth 可以獲取 visual viewport 的寬度。
通過(guò) 可以設(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)的 布局視口 是多寬嗎？
屏幕邏輯像素、布局視口、視覺(jué)視口 三者的關(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è)置視覺(jué)視口 3、如果只設(shè)置 布局視口 和 視覺(jué)視口 中的一個(gè)，那么另一個(gè)也是同樣的寬度 4、布局視口 的寬度始終大于等于 視覺(jué)視口
舉例 iPhone 5 上面
那么視覺(jué)視口和布局視口分別是多寬呢？
最后的最后，終于到了我們耳熟能詳?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/50528.html
摘要：移動(dòng)端頁(yè)面大家都遇到過(guò)的問(wèn)題。移動(dòng)端適配方案上移動(dòng)端適配方案下本文對(duì)做一些補(bǔ)充手機(jī)屏幕手機(jī)屏幕屬于硬件屬性，我們無(wú)論是通過(guò)還是標(biāo)簽都是無(wú)法影響到它的。很多沒(méi)有對(duì)移動(dòng)端做適配的網(wǎng)頁(yè)，我們用手機(jī)打開(kāi)，發(fā)現(xiàn)網(wǎng)頁(yè)被縮小到手機(jī)屏幕這么寬了。 移動(dòng)端頁(yè)面大家都遇到過(guò) viewport 的問(wèn)題。關(guān)于 viewport 的文章有很多了，推薦給大家這兩篇，寫(xiě)得非常詳細(xì)。移動(dòng)端適配方案(上)移動(dòng)端適配方案...
摘要：移動(dòng)端頁(yè)面大家都遇到過(guò)的問(wèn)題。移動(dòng)端適配方案上移動(dòng)端適配方案下本文對(duì)做一些補(bǔ)充手機(jī)屏幕手機(jī)屏幕屬于硬件屬性，我們無(wú)論是通過(guò)還是標(biāo)簽都是無(wú)法影響到它的。很多沒(méi)有對(duì)移動(dòng)端做適配的網(wǎng)頁(yè)，我們用手機(jī)打開(kāi)，發(fā)現(xiàn)網(wǎng)頁(yè)被縮小到手機(jī)屏幕這么寬了。 移動(dòng)端頁(yè)面大家都遇到過(guò) viewport 的問(wèn)題。關(guān)于 viewport 的文章有很多了，推薦給大家這兩篇，寫(xiě)得非常詳細(xì)。移動(dòng)端適配方案(上)移動(dòng)端適配方案...
摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對(duì)應(yīng)的代碼。對(duì)于一個(gè)從零開(kāi)始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開(kāi)發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開(kāi)發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無(wú)疑統(tǒng)治了大多數(shù)用戶(hù)的交互界面！而在移動(dòng)為王的今天，NA開(kāi)發(fā)在早期占領(lǐng)了大多...
閱讀 820·2023-04-25 20:18
閱讀 2104·2021-11-22 13:54
閱讀 2547·2021-09-26 09:55
閱讀 3912·2021-09-22 15:28
閱讀 2982·2021-09-03 10:34
閱讀 1719·2021-07-28 00:15
閱讀 1645·2019-08-30 14:25
閱讀 1288·2019-08-29 17:16
