您好,登錄后才能下訂單哦!
小編給大家分享一下Html5中IphoneX適配的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
IphoneX 的適配,關(guān)鍵在于怎么讓頁面適應(yīng) “齊劉?!?、底部操作區(qū)域以及大圓角問題。
IphoneX 相對于其他手機,不同之處在于設(shè)備雖同樣都是一個屏幕,但其實被分為了好幾個模塊,具體見下圖:
我們正常的一個網(wǎng)頁,搬到X上來,效果是 內(nèi)容只顯示在 Safe Area 安全區(qū)域,非安全區(qū)域部分沒有網(wǎng)內(nèi)容,也就是說頭部和底部會出現(xiàn)白塊,怎么處理?
解決辦法
1. 給body加一個 background-color
為什么要加 background-color?有什么用? 注意到我們剛說到的 頭部和底部會出現(xiàn)白塊,其實說是白色其實并不準(zhǔn)確,因為這個顏色其實來自于 body 的背景色。另外,我們上拉或下拉內(nèi)容時會顯示網(wǎng)頁下方的內(nèi)容及顏色,其實也是body的背景顏色。所以如果你想修改這兩個效果,就可以設(shè)置一下 body 的背景色。
2. 添加 viewport-fit = cover 的 <meta> 標(biāo)簽
這一步極為關(guān)鍵。先看一下結(jié)果:
代碼如下:
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width, viewport-fit=cover" />
為什么說極為關(guān)鍵? iphoneX 的主要問題就是除了安全區(qū)域外,其他地方不能顯示網(wǎng)頁內(nèi)容,而它就是為解決這個問題而量身定制的。當(dāng)設(shè)置了以上內(nèi)容后,頭部和底部就能開放給網(wǎng)頁顯示內(nèi)容。
但是用了之后你會發(fā)現(xiàn),區(qū)域是開放了,但是內(nèi)容(常為導(dǎo)航欄)卻因為“齊劉?!倍徽趽踝×瞬糠謨?nèi)容,并且,發(fā)現(xiàn)原本設(shè)置的100%的高度并沒有占用全部高度空間,怎么辦?
對于頭部的高度和底部的高度,其實是有匹配值的,如下圖:
所以,我們有如下方案處理:
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)注的那幾個值:
safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom
怎么用呢?很簡單:
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 }
也許你沒見過 constant這個東西,我以前也沒見過,它也是專為iphoneX而設(shè)計的值,注意只有當(dāng)你的 <meta> 標(biāo)簽加上了 viewport-fit=cover 之后,該值才能生效。當(dāng)然,在android手機上,是不會被識別的。
3. 只為 IphoneX 生效
注意了,我們做的這個適配是只為 IphoneX 生效的,并不能影響到其他手機,所以我們要做響應(yīng)式布局,即,使用媒體查詢,如下:
// 注意這里采用的是690px(safe area高度),不是812px; @media only screen and (width: 375px) and (height: 690px){ body { height: 100vh; } }
有資料說上面這么用是ok的,然而我用著卻沒啥效果,于是我放寬了點條件,做了修改如下:
@media only screen and (width: 375px) and (min-height: 690px){ body { height: 100vh; } }
區(qū)別在于我是識別寬度為375px,高度大于690px 的設(shè)備即為 IphoneX。當(dāng)然,目前只有X 這款設(shè)備符合該條件。
4. 網(wǎng)頁高度變化
先強調(diào)一下,這部分不太確定,我自己遇到了,提出來說明一下:
設(shè)置了 viewport-fit 之后,會發(fā)現(xiàn)原本設(shè)置的100% 的高度不符合預(yù)期了,只占用了部分屏幕空間,其實,不急,只需要作如下修改:
@media only screen and (width: 375px) and (min-height: 690px) { body { height: 100vh; } }
vh 是檢查 viewport 即視口的高度,1vh = 1% 視口高度,是個絕對單位。設(shè)置100vh的意思就是占滿全屏高度
5. 導(dǎo)航欄吸頂,任務(wù)欄吸底
頁面內(nèi)容可以拉動,如果導(dǎo)航欄也隨著滑動,效果很丑,這就需要我們實現(xiàn)導(dǎo)航欄吸頂效果。實現(xiàn)大家都會就不多說,這里展示我的一個案例:
@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)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。