js 판단 아이 폰 X, 바닥 에 작은 검 은 줄 로 가 려 진 문제

1849 단어 js
아이 폰 X 등 휴대 전화 라면 밑 에 작은 검 은 줄 이 있 으 면 밑 을 가 리 는 버튼 이 있다.
방법 1: 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;

 
방법 2: css 로 해결
meta:


css:

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

 
 
참고: js 판단 아이 폰 XS, 아이 폰 XS Max, 아이 폰 XR, 이후 몇 가지 생각 정리 | 서문 뒷 정원http://ons.me/574.html

좋은 웹페이지 즐겨찾기