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

原文地址:https://www.cnblogs.com/qdlhj/p/8616733.html