Iphone X 兼容性问题2--测过有效

经过实战的演练。终于处理好了刘海问题。

两种方法

第一种： 页面底部没有背景色 （方法很简单）

1. 添加meta

index.html 页面 添加 viewport-fit=contain（留有安全距离。不会全屏显示。不适应于背景有颜色的页面。因为会有一部分没有覆盖）

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=contain" />

2. 页面有fixed ，且bottom为0 时

特别要注意。页面不要加上 height: 100%。 否则你的底部将会没有留有安全距离。（因为100%页面会包括于页面的安全距离）

第二种方法 ： 页面需要占满全屏

1. 添加meta

index.html 页面 添加 viewport-fit=cover, 或者不加上。默认为auto。也相当于cover。意思是： 页面占满屏幕

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover" />

2. 添加 安全距离给body

介绍一下：

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

env() 和 constant()

因为之前使用的constant已经被弃用，所以需要我们向后兼容：

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

注意：给body 添加上这个属性

{
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }

注意：页面元素有fixed ，且bottom为0 时

需要给自身的元素加上 

{
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }

或者通过计算函数 calc 覆盖原来高度：

{
        height: calc(60px(假设值) + constant(safe-area-inset-bottom));
        height: calc(60px(假设值) + env(safe-area-inset-bottom));
   }