IphoneX 的適配,關(guān)鍵在于怎么讓頁(yè)面適應(yīng) “齊劉海”、底部操作區(qū)域以及大圓角問(wèn)題。
IphoneX 相對(duì)于其他手機(jī),不同之處在于設(shè)備雖同樣都是一個(gè)屏幕,但其實(shí)被分為了好幾個(gè)模塊,具體見(jiàn)下圖:

我們正常的一個(gè)網(wǎng)頁(yè),搬到X上來(lái),效果是 內(nèi)容只顯示在 Safe Area 安全區(qū)域,非安全區(qū)域部分沒(méi)有網(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 的 <meta> 標(biāo)簽
這一步極為關(guān)鍵。先看一下結(jié)果:
新聞熱點(diǎn)
疑難解答