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

h5页面在ios刘海屏适配多种，只总结其中一种（官方适配方案）iOS11同时新增了一个特性，constant(safe-area-inset-*)，这是Webkit的一个CSS函数，用于获取安全区域与边界的距离，有四个预定义的变量（单位px）:safe-area-inset-left：安全区域距离左边界距离，横屏时适配safe-area-inset-right：安全区域距离右边界距离，横屏时适配s

Juliet_xmj

1759人浏览 · 2020-08-28 14:37:44

Juliet_xmj · 2020-08-28 14:37:44 发布

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);
  }
}