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

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表