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

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

黄河爱浪

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

阅读量1.1w

点赞数 1

分类专栏： html 文章标签： h5 媒体查询兼容iphonex

本文链接：https://blog.csdn.net/u013350495/article/details/95121399

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号

黄河爱浪

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
h5 底部按钮兼容 iPhone X（解决底部横杠遮挡问题）

方法一：JS判断function isIphoneX(){ if(/iphone/gi.test(window.navigator.userAgent)){ /* iPhone X、iPhone XS */ var x=(window.screen.width === 375 && window.screen.height === 81...
复制链接

扫一扫

专栏目录