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));
}