当前位置: 代码迷 >> 综合 >> css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白 设置安全区域与边界的距离
  详细解决方案

css constant() env()设置iphoneX等机型刘海屏、底部小黑条自动留白 设置安全区域与边界的距离

热度:11   发布时间:2023-12-06 01:58:15.0

iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

    safe-area-inset-left:安全区域距离左边边界距离

    safe-area-inset-right:安全区域距离右边边界距离

    safe-area-inset-top:安全区域距离顶部边界距离

    safe-area-inset-bottom:安全区域距离底部边界距离

安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图1蓝色区域 图2绿色区域 

图1

 

图2

而env()和constant()函数有个必要的使用前提,H5网页设置viewport-fit=cover的时候才生效,小程序里的viewport-fit默认是cover 可以直接使用 H5设置如下

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

使用方法:

body {padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */}

之所以写了constant和env两种 是因为ios11.2版本以后constant废弃,env生效  写2种是兼容所有ios版本 官方自从11.2后废弃constant说明截图如下:

官方在11.2版本之后 还增加了max() min() 去解决兼容横纵向切换时出现的问题 设置safe-area-inset-left左边距距离横向正常 恢复为纵向时,env(safe-area-inset-left)被解析为0px 左侧内容会紧贴屏幕 所以使用如下方式 做兼容

@supports(padding: max(0px)) {.post {padding-left: max(12px, env(safe-area-inset-left));padding-right: max(12px, env(safe-area-inset-right));}
}

附官方相关详情文档链接:Designing Websites for iPhone X

  相关解决方案