黑马程序员技术交流社区

标题: 移动端适配iPhoneX以上版本的方法 [打印本页]

---

作者: 小小K    时间: 2020-11-27 17:07
标题: 移动端适配iPhoneX以上版本的方法


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





      第一：
              

[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));

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2