iphoneX手机取消了实体Home键，取而代之的是主界面底部不显眼的横条“Home Indicator”。也就是从 iPhone X 开始出现了刘海和底部的黑条的区域，当网页底部fixed 元素时候，一部分元素可能就被这个横条遮挡住，横屏时又可能被刘海挡住，怎么适配解决呢？
左侧是被遮盖图，右侧是修改bug后的图
在iOS11 之后有这么一个概念safeArea（安全区域），这里主要探讨一下safeArea相关的两个概念，safeAreaLayoutGuide和safeAreaInsets。 在官网上有这么两张图片：
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响。
具体适配方案如下：
1.从iOS11开始，为了适配刘海屏，Apple公司对HTML的viewport meta标签做了扩展，新增 viewport-fit 属性，使得页面内容完全覆盖整个窗口：
只有设置了 viewport-fit=cover，才能使用 env()。
viewport-fit 有3个值：
contain: 可视窗口完全包含网页内容cover：网页内容完全覆盖可视窗口auto：默认值，跟 contain 表现一致
2.限定安全区
iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
safe-area-inset-left：安全区域距离左边边界的距离safe-area-inset-right：安全区域距离右边边界的距离safe-area-inset-top：安全区域距离顶部边界的距离safe-area-inset-bottom：安全区域距离底部边界的距离
.nav{
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 0.98rem;
font-size: 0.2rem;
text-align: center;
background-color:rgba(0,0,0,.8);
padding-bottom:constant(safe-area-inset-bottom); /*兼容 iOS < 11.2 */
padding-bottom:env(safe-area-inset-bottom); /*兼容 iOS > 11.2 */
}
注意：
当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它。env() 跟 constant() 需要同时存在，而且顺序不能换。
左侧未设置，右侧设置后的效果
3.横屏
从上图可见，横屏对页面内容有影响。
解决方案：
body{
font-family: PingFang;
font-weight: 400;
padding-left:constant(safe-area-inset-left);
padding-left:env(safe-area-inset-left);
padding-right:constant(safe-area-inset-right);
padding-right:env(safe-area-inset-right);
background-color: #fff;
}
当然还可以使用 @supports 一般只希望 iPhoneX 才需要新增适配样式,可以配合 @supports 编写样式：
@supports (bottom: env(safe-area-inset-bottom)) {
div {
margin-bottom: env(safe-area-inset-bottom);
}
}
还有哪些方式，欢迎补充。
推荐阅读
您阅读本篇文章共花了：
发表评论