H5页面解决iphoneX底部黑条

一、js判断， 给底部加padding适配。

$(document).ready(function () {
　　iphoneX();
　　function iphoneX() {
　　　　var userAgent = navigator.userAgent;
　　　　var ios = !!userAgent .match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
　　　　if (ios) {
　　　　　　if (screen.height == 812 && screen.width == 375) {
　　　　　　　　$('.footer).css('padding-bottom', '0.5rem')
　　　　　　} else if (screen.height == 896 && screen.width == 414) {
　　　　　　　　$('.footer).css('padding-bottom', '1rem')
　　　　　　}
　　　　}
　　}
});

// iPhone X、iPhone XS
var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
// iPhone XS Max
var isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
// iPhone XR
var isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;

二、css解决

 

1：增加viewport属性 viewport-fit="cover"
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">

2 利用constant函数 这个函数是ios11新增的css属性用于设定安全区域与边界的距离

 

安全区域与左右上下的距离

safe-area-inset-top

safe-area-inset-bottom

safe-area-inset-left 

safe-area-inset-right

body{
　　padding-bottom:constant(safe-area-inset-bottom);
}

3:对fixed元素的适配
1： fixed 元素完全吸低(bottom=0)

通过增加内边距扩展高度
{
　　padding-bottom:constant(safe-area-inset-bottom);
}
通过calc覆盖原来高度
{
　　height:calc(30(假设值)+constant(safe-area-inset-bottom));
}
还有一种是新增空白元素
{
　　position:fixed;
　　bottom:0;
　　height:constant(safe-area-inset-bottom);
　　width:100%;
　　background:#fff;
}

2：fixed元素不完全吸底
通过外边距来处理
{
　　margin-bottom:constant(safe-area-inset-bottom);
}
还有一种通过calc覆盖原来bottom值
{
　　bottom:calc(20(设定值)+constant(safe-area-inset-bottom));
}