前言：
           移动端的适配兼容性问题在面试中，常问的问题，那接下来就总结一下适配问题的解决方案。





      第一：
              

[HTML] 纯文本查看 复制代码

<meta name="viewport" content="width=device-width, user-scalable=no, viewport-fit=cover">

       viewport-fit=cover 显示全屏显示
     第二：通过JS判断判断iphone设备的型号
            

[JavaScript] 纯文本查看 复制代码

/* 是否为 iPhoneX系列手机 */[mw_shl_code=javascript,true]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";

[/mw_shl_code]
    第三：可以通过padding 利用constant函数，只有设置了viewport-fit=cover才能使用constant函数
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom));

      前言：
           移动端的适配兼容性问题在面试中，常问的问题，那接下来就总结一下适配问题的解决方案。





      第一：
              

[HTML] 纯文本查看 复制代码

<meta name="viewport" content="width=device-width, user-scalable=no, viewport-fit=cover">

       viewport-fit=cover 显示全屏显示
     第二：通过JS判断判断iphone设备的型号
            

[JavaScript] 纯文本查看 复制代码

/* 是否为 iPhoneX系列手机 */[mw_shl_code=javascript,true]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";

[/mw_shl_code]
    第三：可以通过padding 利用constant函数，只有设置了viewport-fit=cover才能使用constant函数
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom));