iPhone X中安全区域的概念
设计的兼容要求:
在Vue项目中应用如下(共2步):
1. 设置meta中viewport-fit=cover
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
- 应用安全区域概念
将兼容代码隔离起来
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
body {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
}