iphoneX适配！！！

Posted 2020-10-28 心向阳

方法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()不一定一样，所以推荐使用第二种方法媒体查询进行适配。