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