H5页面 iPhone X底部小黑条占位

最新推荐文章于 2024-06-15 18:00:24 发布

莫失莫忘BK

最新推荐文章于 2024-06-15 18:00:24 发布

阅读量1.1k

点赞数

分类专栏： H5页面文章标签： H5页面 iPhone X底部小黑条占位

H5页面专栏收录该内容

1 篇文章

订阅专栏

H5页面 iPhone X底部小黑条占位
方法一：用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判断，给底部加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;

转摘：https://blog.youkuaiyun.com/ljqscdnljq/article/details/85062180