iphoneX系列手机在页面滚动时隐藏底部的操作栏

最新推荐文章于 2024-10-15 15:17:03 发布

小姚同志yao

最新推荐文章于 2024-10-15 15:17:03 发布

阅读量1.6k

点赞数

分类专栏：移动端样式兼容

本文链接：https://blog.csdn.net/yao_1063066968/article/details/108849957

版权

移动端样式兼容专栏收录该内容

2 篇文章 0 订阅

订阅专栏

iphoneX系列手机底部都有一个（横杠）键，浏览器会在页面滚动时隐藏底部的操作栏，需求：底部导航栏出现

1、判断是iphonex设备的方法

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 、iPhone XR */
        var xMax=(window.screen.width === 414 && window.screen.height === 896);
        if(x || xMax){
            return true;
        }else{
            return false;
        }
    }else{
        return false
    }
}

2、窗口改变时，可视区域的值变化

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