vue x 兼容iphone_详解关于移动端兼容iPhoneX底部小黑条

场景

由于iPhoneX去掉了物理按键，改为了底部小黑条，这就会导致屏幕适配问题，最常见的场景就是底部fixed的元素被阻挡的情况。对于这种问题，我们一般采取css或js的处理方式(适用于h5，小程序)。

css适配方案(推荐)

第一步：设置网页的头部标签

viewport-fit：IOS11新增的特性，是为了iPhoneX而对meta标签做出的一个拓展属性。目前有三个值：

contain 可视窗口完全包含网页内容

cover：网页内容完全覆盖可视窗口

auto：默认值，跟 contain 表现一致

注意：适配的关键在于必须设置viewport-fit=cover

第二步：将页面主体设置在安全区域内

这一步视实际场景而定，可以不设置，带来的影响就是会出现底部区域的内容会被挡住；

body {

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

}

env() 和 constant()是IOS11新增的css函数，有四个预定义的变量safe-area-inset-bottom、safe-area-inset-top、safe-area-inset-left、safe-area-inset-right，分别是安全区域到各边界的距离，此时我们只需要关心afe-area-inset-bottom(横竖屏的情况下是不一样的)。对于不支持这两个属性的情况，浏览器会忽略。

注意，constant()在IOS11.2之后是不可使用的，因此要向后兼容，即env()，且二者位置不可调换；

constant(): 兼容IOS < 11.2

env(): 兼容IOS >= 11.2

第三步：设置目标元素(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://blog.csdn.net/weixin_43989257/article/details/107304018

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！