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é)果：

發(fā)表評(píng)論 共有條評(píng)論 用戶(hù)名: 密碼: 驗(yàn)證碼: 匿名發(fā)表