h5 底部按钮兼容 iPhone （解决底部横杠遮挡问题）

最新推荐文章于 2023-09-19 09:28:22 发布

freewlt

最新推荐文章于 2023-09-19 09:28:22 发布

阅读量2k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_16672095/article/details/115212980

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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的尺寸写

freewlt

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录