前端小技巧

104 阅读1分钟

1移动端H5-iPhone安全距离适配

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

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

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

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

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

这里我们只需要关注 safe-area-inset-bottom 这个变量,因为它对应的就是小黑条的高度(横竖屏时值不一样)。

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