H5解决ios下刘海屏的问题

全面屏手机把整个webview（包括状态栏）给H5的话，头部的返回按钮会置于页面的安全区外，会盖住header区域，导致无法后退等其他操作。

 

先说下constant 函数

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

safe-area-inset-left
safe-area-inset-right
safe-area-inset-top
safe-area-inset-bottom

constant ：针对iOS < 11.2以下系统

env ：针对于iOS >= 11.2的系统

这两个函数都是 webkit 中 css 函数，可以直接使用变量函数，只有在 webkit 内核下才支持

网页默认不添加扩展的表现是 viewport-fit=contain ，需要适配 iPhone 必须设置 viewport-fit=cover才起作用

 先设置网页在可视窗口的布局方式

<meta name='viewport'  content="width=device-width, viewport-fit=cover"  />

页面主体内容限定在安全区域内

body {
  /* 适配齐刘海*/
  padding-top: constant(safe-area-inset-top);  
 /* 适配底部黑条*/
  padding-bottom: constant(safe-area-inset-bottom);
}

　　

如果页面头部用的是非定位的，页面的主体部分和按钮用的是absolute定位时，要记得给主体部分添加如下样式：

margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);