网页兼容iPhone X

参考网址 https://aotu.io/notes/2017/11/27/iphonex/index.html

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">

1. 应用安全区域概念
   将兼容代码隔离起来

@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);
  }
}