iOS特性方法(推荐),小程序也可用
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iOS安全区域</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<style>
.a{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}
.b{
background-color: green;
height: 100px;
}
</style>
</head>
<body>
<div style="height: 1500px;">Safari浏览器滚动页面查看效果</div>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>
方法一:JS判断
function isIphoneX(){
if(/iphone/gi.test(window.navigator.userAgent)){
/* iPhone X、iPhone XS */
var x=(window.screen.width === 375 && window.screen.height === 812);
/* iPhone XS Max */
var xsMax=(window.screen.width === 414 && window.screen.height === 896);
/* iPhone XR */
var xR=(window.screen.width === 414 && window.screen.height === 896);
if(x || xsMax || xR){
return true;
}else{
return false;
}
}else{
return false
}
}
/* 函数使用 */
if(isIphoneX()){
document.querySelector( selector ).style.paddingBottom="34px";
}
方法二:CSS媒体查询
@media screen and (width: 375px) and (height: 812px){
.button {
padding-bottom: 34px;
}
}
// 更多 iPhone X 系列其它尺寸请参照JS的尺寸写