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

  • 相关阅读:
    Android之基于XMPP即时通讯(转)
    开机启动service小DEMO
    Android 歌词同步滚动效果(转)
    OC中的消息传递和初始化
    oc中对象的初始化
    c语言的结构体字节数统计
    css的页面布局
    说一说我理解的css
    什么是js闭包
    我对js作用域的理解
  • 原文地址:https://www.cnblogs.com/qdlhj/p/8616733.html
Copyright © 2020-2023  润新知