iOS特性方法(推荐),小程序也可用
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
iOS特性方法完整源码示例
<!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的尺寸写
小编推荐方法二,能在CSS中解决的事情,不要交给JS去处理。可能写的会更多一点,但不会存在渲染时元素突然上跳的感觉。
虽然实现了底部home键的兼容,但是在safari浏览器中,浏览器底部的操作栏会有显示和隐藏的切换,如何动态兼容呢?
请阅读小编的原创文章《javascript iphoneX的safari浏览器操作栏隐藏时兼容底部home键》
文章地址:https://blog.csdn.net/u013350495/article/details/99228848
作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com
公众号:
web-7258
,本文原创,著作权归作者所有,转载请注明原链接及出处。更多精彩文章,请扫下方二维码关注我的公众号