IphoneX 的適配，關鍵在于怎么讓頁面適應 “齊劉海”、底部操作區域以及大圓角問題。

IphoneX 相對于其他手機，不同之處在于設備雖同樣都是一個屏幕，但其實被分為了好幾個模塊，具體見下圖：

我們正常的一個網頁，搬到X上來，效果是 內容只顯示在 Safe Area 安全區域，非安全區域部分沒有網內容，也就是說頭部和底部會出現白塊，怎么處理？

解決辦法

1. 給body加一個 background-color

為什么要加 background-color？有什么用？ 注意到我們剛說到的 頭部和底部會出現白塊，其實說是白色其實并不準確，因為這個顏色其實來自于 body 的背景色。另外，我們上拉或下拉內容時會顯示網頁下方的內容及顏色，其實也是body的背景顏色。所以如果你想修改這兩個效果，就可以設置一下 body 的背景色。

2. 添加 viewport-fit = cover 的 <meta> 標簽

這一步極為關鍵。先看一下結果：

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