js判断iPhone X，适配底部被小黑条遮挡问题

最新推荐文章于 2023-05-08 14:56:50 发布

nothingbok

最新推荐文章于 2023-05-08 14:56:50 发布

阅读量5.7k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/ljqscdnljq/article/details/85062180

版权

js 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

如果是iPhoneX等手机，底部有小黑条会遮挡底部的按钮

方法一：js判断，给底部加padding适配。

$(document).ready(function () {
    isIPhoneX();
    function isIPhoneX() {
        var u = navigator.userAgent;
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isIOS) {
            if (screen.height == 812 && screen.width == 375) {
                $('.menu_wkBox.back_box').css('padding-bottom', '0.5rem')
            } else if (screen.height == 896 && screen.width == 414) {
                $('.menu_wkBox.back_box').css('padding-bottom', '1rem')
            }
        }
    }
});

// iPhone X、iPhone XS
var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
// iPhone XS Max
var isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
// iPhone XR
var isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;

方法二：用css解决

meta：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

css：

@supports (bottom: env(safe-area-inset-bottom)) {
    .menu_wkBox.back_box{
        padding-bottom: env(safe-area-inset-bottom);
    }
}

参考：js判断iPhone XS、iPhone XS Max、iPhone XR，之后的几点思考总结 | 西门的后花园 http://ons.me/574.html