iphoneX适配!!!

Posted 心向阳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iphoneX适配!!!相关的知识,希望对你有一定的参考价值。

方法1.js判断(以下采用Jquery)

 //适配iphonex
 if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){        
      $(".end-page").addClass("step-page-x");
      $(".false-img").css("paddingTop","2.5rem");
}

方法2.利用iphoneX独特的型号参数

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    #btn {
        padding-bottom:34px; 
    }
}

375 — iphoneX设备的宽度
812 — iphoneX设备的高度
3 — iphoneX设备的分辨率
724 — iphoneX设备的高度(812) - 顶部通栏高度(88)

注意:

使用第一种方法js判断的时候,$(window).height()计算的是扣掉所在浏览器的头部底部后的高度,这边的724是指H5在微信客户端打开,扣掉微信客户端自带的头部导航高度88后,所的724高度。

但是要是在其它浏览器(uc浏览器),嵌在uc浏览器客户端里面,UC浏览器有自带的头部导航和底部导航,所以$(window).height()计算出来的不是724,不同客户端计算出来的$(window).height()不一定一样,所以推荐使用第二种方法媒体查询进行适配。

以上是关于iphoneX适配!!!的主要内容,如果未能解决你的问题,请参考以下文章

iPhoneX 适配总结

vue适配iphoneX底部安全区域

猫猫分享 iOS 适配iPhoneXS Max,iPhoneXS,iPhoneXR

猫猫分享 iOS 适配iPhoneXS Max,iPhoneXS,iPhoneXR

iphonex 适配

适配IphoneX