混合开发笔记5——h5页面在ios刘海屏适配

h5页面在ios刘海屏适配

多种，只总结其中一种（官方适配方案）

iOS11同时新增了一个特性，constant(safe-area-inset-*)，这是Webkit的一个CSS函数，用于获取安全区域与边界的距离，有四个预定义的变量（单位px）:

• safe-area-inset-left：安全区域距离左边界距离，横屏时适配
• safe-area-inset-right：安全区域距离右边界距离，横屏时适配
• safe-area-inset-top：安全区域距离顶部边界距离，竖屏下刘海屏为44px，iphone6系列20px，竖屏刘海适配关键
• safe-area-inset-bottom：安全区域距离底部边界距离，竖屏下为34px，竖屏小黑条适配关键
  一般使用 safe-area-inset-top，safe-area-inset-bottom

使用

（1）html页面头部
让页面充满全屏

<meta name="viewport" content="viewport-fit=cover">

（2）css适配
使用**@supports**查询机型是否支持constant() / env()实现兼容代码隔离，个别安卓也会成功进入这个判断，因此加上-webkit-overflow-scrolling: touch的判断可以有效规避安卓机。
env() 是为了防止有些机型不支持constant()

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {.fullscreen {/* 适配齐刘海 */padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);/* 适配底部小黑条 */padding-bottom: costant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
}