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 === 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，邮箱：[email protected]

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

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