javascript iphoneX的safari浏览器操作栏隐藏时兼容底部home键

雨点打透心脏的1/2处 2021-10-18 11:42 796阅读 0赞

iphoneX系列手机底部都有一个home键（横杠），safari浏览器会在页面滚动时隐藏底部的操作栏，许多应用都有在底部放置导航栏的需求。网上的帖子一般都是通过给底部导航栏元素添加内补34像素来处理，问题能够解决，但是safari浏览器在没有隐藏操作栏时又有影响美观。

在老板看到小米商城手机版有处理掉这个问题的时候，把需求提给了小编。

小编通过观察浏览器滚动条，滚动手势，窗口变化等浏览器表现情况寻找解决办法。

> iOS 已有专属的属性，推荐使用

### 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>

### ======从这里开始是原来的旧内容方式，可以选择性忽略！====== ###

第一个尝试方案对浏览器滚动条下手，通过观察发现safari浏览器的操作栏隐藏与显示与滚动条的滚动方向和当前滚动距离都没有关系，第一个方案以失败告终。而且滚动条滚动事件触发频率比较高，这也并不是小编想用的方式。高频率触发事件势必会影响列表的流畅度的表现。

第二个尝试解决的方案监听浏览器可视区域变化，我网上搜索了一番，获取可视区域大小的接口是 window.innerHeight ，有使用jQuery的伙伴们可别使用 $(window).height() 的方法了，这两者是不同的。方案确定后，开始编码，代码的高潮要来了！！

## 1、创建一个判断是iphonex设备的方法 ##

该方法在小编的原创文章[《h5 底部按钮兼容 iPhone X（解决底部横杠遮挡问题）》][h5 _ iPhone X]中。  
文章地址：[https://blog.csdn.net/u013350495/article/details/95121399][h5 _ iPhone X]  
请各位读者们移步到这篇文章中获取 isIphoneX() 方法的源码。

## 2、窗口改变事件 + 可视区域 完成编码 ##

/* 是否为 iPhoneX系列手机 */
    if(isIphoneX()){
        /* 原可视区域 */
        var oldHeight=window.innerHeight;
        window.addEventListener("resize",function () {
            /* safari浏览器的操作栏隐藏时可视区域会变大 */
            if(window.innerHeight>oldHeight){
                /*
                    #tabBar 是底部导航栏的选择器
                    通过 修改style值 或 改变class值 请自行决定
                 */
                document.querySelector("#tabBar").style.paddingBottom="34px";
            }else {
                document.querySelector("#tabBar").style.paddingBottom="0px";
            }
        },false);
    }

编码完毕，非常漂亮的完成了需求，给自己鼓掌一波！

![20190811212004896.gif][]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[h5 _ iPhone X]: https://blog.csdn.net/u013350495/article/details/95121399
[20190811212004896.gif]: /images/20211018/f831d77cc8ac4200b3f44fbd3bf846f4.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211018/1d1066ab56a74defbd494d48565a3141.png