【前端UI】小程序&H5 适配iPhoneX/XS 安全区

【前端UI】小程序&H5 适配iPhoneX/XS 安全区

做一个严谨的页面还原稿【来自KM】

---

一、适配的含义

可视、可操作区域是在安全区域内。

没有做适配的情况：

二、安全区的含义

不被圆角、齐刘海、底部小黑条（Home Indicator）遮挡的长方形。

三、H5页面适配安全区

body {
   
    padding: constant(safe-area-inset-top) 
    constant(safe-area-inset-right)              
    constant(safe-area-inset-bottom) 
    constant(safe-area-inset-left);  
	// constant在iOS<11.2的版本中生效   
	  
	padding: env(safe