适配iPhoneX底部的小黑条
适配iPhoneX底部的小黑条
一、场景
- 由于iPhoneX去掉了物理按键,改为了底部小黑条,这就会导致屏幕适配问题,最常见的场景就是底部fixed的元素被阻挡的情况。对于这种问题,我们一般采取css或js的处理方式(适用于h5,小程序)。
二、css适配方案(推荐)
第一步:设置网页的头部标签
<meta name="viewport" content="width=device-width, viewport-fit=cover">
viewport-fit:IOS11新增的特性,是为了iPhoneX而对meta标签做出的一个拓展属性。三个值:
- contain:可视窗口完全包含网页内容
- cover:网页内容完全覆盖可视窗口
- auto:默认值,跟 contain 表现一致
注意:适配的关键在于必须设置viewport-fit=cover
第二步:将页面主体设置在安全区域内
这一步视实际场景而定,可以不设置
body {
padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
env() 和 constant()是IOS11新增的css函数:
- 有四个预定义的变量:safe-area-inset-bottom、safe-area-inset-top、safe-area-inset-left、safe-area-inset-right,分别是安全区域到各边界的距离。
- 横竖屏的情况不一样
- 对于不支持这两个属性的情况,浏览器会忽略。
注意:constant()在IOS11.2之后是不可使用的,因此要向后兼容,即env(),且二者位置不可调换。
第三步:设置目标元素(fixed)的高度
- 对于目标元素,可设置bottom、padding-bottom、margin-bottom 均可:
.fixed {
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
}
- 或者新增一个height = constant(safe-area-inset-bottom)空白区块亦可,方案多样。
三、JS适配方案
- 通过判断机型给底部fixed元素添加padding-bottom,或者新增个空白区块。
function isIphoneX(){
return /iphone/gi.test(window.navigator.userAgent) &&
window.devicePixelRatio &&
window.devicePixelRatio === 3 &&
window.screen.width === 375 &&
window.screen.height === 812;
}
转自:
作者:黄哈哈。
原文链接:https://www.cnblogs.com/jiajia-hjj/p/15424717.html
本博客大多为学习笔记或读书笔记,本文如对您有帮助,还请多推荐下此文,如有错误欢迎指正。