1、首先，給viewport meta 標簽添加一個擴展viewport-fit，用於設置網頁在手機的可視窗口的布局方式
屬性值有：contain 視窗包含網頁
cover 網頁覆蓋視窗
auto 默認值，同contain效果
注意：網頁默認不添加擴展的表現是 viewport-fit=contain，需要適配 iPhoneX 必須設置 viewport-fit=cover，這是適配的關鍵步驟
2、env() 和 constant()
ios新增特性函數，用於設置安全區域與邊界的距離，有四個值
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
- safe-area-inset-left：安全區域距離左邊邊界距離
- safe-area-inset-right：安全區域距離右邊邊界距離
- safe-area-inset-top：安全區域距離頂部邊界距離
- safe-area-inset-bottom：安全區域距離底部邊界距離
底部兼容只需設置bottom邊距即可
注意：env() 跟 constant() 需要同時存在，而且順序不能換。
參考：https://aihongxin.com/814.html