IphoneX 的適配，關鍵在於如何讓頁面適應齊瀏海、底部操作區域以及大圓角問題。
IphoneX 相對於其他手機，不同之處在於設備雖同樣都是一個螢幕，但其實被分為了好幾個模組，具體見下圖：
我們正常的一個網頁，搬到X上來，效果是內容只顯示在Safe Area 安全區域，非安全區域部分沒有網內容，也就是說頭部和底部會出現白塊，怎麼處理？
解決辦法1. 給body加一個background-color為什麼要加background-color？有什麼用？ 注意到我們剛剛說到的頭部和底部會出現白塊，其實說是白色其實並不準確，因為這個顏色其實是來自於body 的背景色。另外，我們上拉或下拉內容時會顯示網頁下方的內容及顏色，其實也是body的背景顏色。所以如果你想修改這兩個效果，你可以設定一下body 的背景色。
2. 新增viewport-fit = cover 的<meta> 標籤這一步極為關鍵。先看一下結果：
複製程式碼