IphoneX适配问题 iOS刘海屏 安全区域处理
前言
iPhoneX去掉了底部的按键,增加了小黑条,这就使得网页工作者需要做一下适配。
适配前需要了解的几个关键字
安全区域
安全区域是指不受圆角、刘海屏、小黑条影响的区域,所以要确保你的内容显示在安全区域内
官网的图片解释,具体信息可移步human-interface-guidelines/ios/visual-design
viewport-fit
这是iOS11的新增特性,为了兼容刘海屏新推出的对viewport meta的一个扩展,属性值有三个。
- cantain 可视窗口完全显示网页内容(左)
- cover 网页内容完全覆盖可视窗口(右)
- auto 效果与contain 相同
详细解释viewport-fit-descriptor
env() 和 constant()
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:
- safe-area-inset-left:安全区域距离左边边界距离
- safe-area-inset-right:安全区域距离右边边界距离
- safe-area-inset-top:安全区域距离顶部边界距离
- safe-area-inset-bottom:安全区域距离底部边界距离
constant()是兼容< iOS11.2
env() 兼容 >= ios11.2
适配的方法
第一步 设置网页在可视区的布局方式,增加viewport-fit属性 viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
第二步 页面主体内容限制在安全区域内
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
第三步 fixed元素的适配
通过增加内边距的方式或者设置bottom值
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
如果有预设的边距值,可以使用calc()进行计算
{
padding-bottom: calc(60px(假设值) + constant(safe-area-inset-bottom));
padding-bottom: calc(60px(假设值) + env(safe-area-inset-bottom));
}
这样处理基本就没问题。
文章原出处凹凸实验室