小編給大家分享一下Html5中IphoneX適配的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
IphoneX 的適配，關(guān)鍵在于怎么讓頁(yè)面適應(yīng) “齊劉?！?、底部操作區(qū)域以及大圓角問(wèn)題。
IphoneX 相對(duì)于其他手機(jī)，不同之處在于設(shè)備雖同樣都是一個(gè)屏幕，但其實(shí)被分為了好幾個(gè)模塊，具體見下圖：
我們正常的一個(gè)網(wǎng)頁(yè)，搬到X上來(lái)，效果是 內(nèi)容只顯示在 Safe Area 安全區(qū)域，非安全區(qū)域部分沒有網(wǎng)內(nèi)容，也就是說(shuō)頭部和底部會(huì)出現(xiàn)白塊，怎么處理？
解決辦法
1. 給body加一個(gè) background-color
為什么要加 background-color？有什么用？ 注意到我們剛說(shuō)到的 頭部和底部會(huì)出現(xiàn)白塊，其實(shí)說(shuō)是白色其實(shí)并不準(zhǔn)確，因?yàn)檫@個(gè)顏色其實(shí)來(lái)自于 body 的背景色。另外，我們上拉或下拉內(nèi)容時(shí)會(huì)顯示網(wǎng)頁(yè)下方的內(nèi)容及顏色，其實(shí)也是body的背景顏色。所以如果你想修改這兩個(gè)效果，就可以設(shè)置一下 body 的背景色。
2. 添加 viewport-fit = cover 的 標(biāo)簽
這一步極為關(guān)鍵。先看一下結(jié)果：
代碼如下:
為什么說(shuō)極為關(guān)鍵？ iphoneX 的主要問(wèn)題就是除了安全區(qū)域外，其他地方不能顯示網(wǎng)頁(yè)內(nèi)容，而它就是為解決這個(gè)問(wèn)題而量身定制的。當(dāng)設(shè)置了以上內(nèi)容后，頭部和底部就能開放給網(wǎng)頁(yè)顯示內(nèi)容。
但是用了之后你會(huì)發(fā)現(xiàn)，區(qū)域是開放了，但是內(nèi)容（常為導(dǎo)航欄）卻因?yàn)椤褒R劉海”而被遮擋住了部分內(nèi)容，并且，發(fā)現(xiàn)原本設(shè)置的100%的高度并沒有占用全部高度空間，怎么辦？
對(duì)于頭部的高度和底部的高度，其實(shí)是有匹配值的，如下圖：
所以，我們有如下方案處理：
1. 修改我們導(dǎo)航欄的高度，為原本高度加上safe-area-inset-top 的高度，也就是44px；具體可以這么寫：
height: calc(navHeight + 44px);，并且重新設(shè)置一下導(dǎo)航欄上文案的位置。
2. IOS 11的瀏覽器chromium內(nèi)核提供了以下內(nèi)容，也就是我們上圖標(biāo)注的那幾個(gè)值：
safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom
怎么用呢？很簡(jiǎn)單：
重慶分公司
重慶分公司
body {
padding-top: constant(safe-area-inset-top); //為導(dǎo)航欄+狀態(tài)欄的高度 88px
padding-left: constant(safe-area-inset-left); //如果未豎屏?xí)r為0
padding-right: constant(safe-area-inset-right); //如果未豎屏?xí)r為0
padding-bottom: constant(safe-area-inset-bottom);//為底下圓弧的高度 34px
}也許你沒見過(guò) constant這個(gè)東西，我以前也沒見過(guò)，它也是專為iphoneX而設(shè)計(jì)的值，注意只有當(dāng)你的 標(biāo)簽加上了 viewport-fit=cover 之后，該值才能生效。當(dāng)然，在android手機(jī)上，是不會(huì)被識(shí)別的。
3. 只為 IphoneX 生效
注意了，我們做的這個(gè)適配是只為 IphoneX 生效的，并不能影響到其他手機(jī)，所以我們要做響應(yīng)式布局，即，使用媒體查詢，如下：
// 注意這里采用的是690px(safe area高度)，不是812px;
@media only screen and (width: 375px) and (height: 690px){
body {
height: 100vh;
}
}有資料說(shuō)上面這么用是ok的，然而我用著卻沒啥效果，于是我放寬了點(diǎn)條件，做了修改如下：
@media only screen and (width: 375px) and (min-height: 690px){
body {
height: 100vh;
}
}區(qū)別在于我是識(shí)別寬度為375px，高度大于690px 的設(shè)備即為 IphoneX。當(dāng)然，目前只有X 這款設(shè)備符合該條件。
4. 網(wǎng)頁(yè)高度變化
先強(qiáng)調(diào)一下，這部分不太確定，我自己遇到了，提出來(lái)說(shuō)明一下：
設(shè)置了 viewport-fit 之后，會(huì)發(fā)現(xiàn)原本設(shè)置的100% 的高度不符合預(yù)期了，只占用了部分屏幕空間，其實(shí)，不急，只需要作如下修改：
@media only screen and (width: 375px) and (min-height: 690px) {
body {
height: 100vh;
}
}vh 是檢查 viewport 即視口的高度，1vh = 1% 視口高度，是個(gè)絕對(duì)單位。設(shè)置100vh的意思就是占滿全屏高度
5. 導(dǎo)航欄吸頂，任務(wù)欄吸底
頁(yè)面內(nèi)容可以拉動(dòng)，如果導(dǎo)航欄也隨著滑動(dòng)，效果很丑，這就需要我們實(shí)現(xiàn)導(dǎo)航欄吸頂效果。實(shí)現(xiàn)大家都會(huì)就不多說(shuō)，這里展示我的一個(gè)案例：
@media only screen and (width: 375px) and (min-height: 690px){
div {
position: fixed;
display: block;
z-index: 300;
}
.bg {
height: calc(3.5rem + 44px);
}
p {
margin-top: 44px;
}
}任務(wù)欄同理。
以上是“Html5中IphoneX適配的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
