H5解决ios下刘海屏的问题

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

 

先说下constant 函数

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

?

1 2 3 4

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才起作用

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

?

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

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

?

1 2 3 4 5 6

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

　　

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

?

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