env()和constant()设置安全区域

林北彼

已于 2022-06-30 10:10:51 修改

阅读量5.1k

点赞数

文章标签：前端 html

于 2022-06-30 10:09:24 首次发布

原文链接：https://www.cnblogs.com/djjlovedjj/p/14686684.html

版权

css属性——env()和constant()设置安全区域 - 青云码上 - 博客园

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离
而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。

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

height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2

height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2

padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2

padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2

// 先constant再env

使用@supports完美兼容CSS属性 - 青云码上 - 博客园
今天写微信小程序遇到一个问题：给page加 150rpx 的 padding-bottom 值，我考虑到 iphone X 系列的底部黑线，参考我之前写的css属性——env()和constant()设置安全区域；所以我这样写：

page{
  padding-bottom: calc( constant(safe-area-inset-bottom) + 150rpx);
  padding-bottom: calc( env(safe-area-inset-bottom) + 150rpx);
}

这样写，在开发者工具、安卓手机、iphoneX系列手机都没问题，都能识别到，然后我用我的古董机（iphone SE 1代，IOS 10.3系统），发现 padding-bottom 无效，尝试了多次，最后发现可以使用 css 的 @supports，使用方法和 @media 差不多：

page{
  padding-bottom: calc( constant(safe-area-inset-bottom) + 150rpx);
  padding-bottom: calc( env(safe-area-inset-bottom) + 150rpx);
}
/* not 表示不支持括号内的属性 */
@supports not(constant(safe-area-inset-bottom)){
  page{
    padding-bottom: 150rpx;
  }
}

@supports - CSS（层叠样式表） | MDN