zoukankan      html  css  js  c++  java
  • h5页面适配iPhone X的方法

     

    一.原生适配iphoneX

    原生适配很简单,查看机型图:

     

    只要用

    #define KIsiPhoneX ([UIScreen mainScreen].bounds.size.height>800.0f

    判断是iPhone X的机型时,就在控制器的顶端,和底部留出 44px和34px的距离,然后webView装在这个控制器内就OK!

    优点:在原生中适配,h5页面不用更改任何一句代码。

    缺点:1)意味着如右图某些通栏页面无法实现,

    2)顶部和底部显色固定,无法适应页面颜色,(王者荣耀用链接地址传递参数的形式在原生中完美适配,不太明白原理)

     

    ** 一.h5页面适配iphoneX**

    ** 1.viewport-fit适配方案**

    PhoneX的适配,在iOS 11中采用了viewport-fit的meta标签作为适配方案;viewport-fit的默认值是auto。css 函数 env() 和 constant()这两个函数都是 webkit 中 css 函数,可以直接使用变量函数,只有在 webkit 内核下才支持

    env 函数

    必须在 ios >= 11.2 才支持

    constant 函数

    必须 ios < 11.2 支持

    viewport-fit取值如下:

    safe-area-inset-top :视口顶部到安全区域的距离(以CSS像素为单位),一般情况下是 0。

    safe-area-inset-right :视口最右边到安全区域的距离(以CSS像素为单位),一般情况下是 0。

    safe-area-inset-left :视口最左边到安全区域的距离(以CSS像素为单位)在刘海全屏的时候 top 为 88px

    safe-area-inset-bottom :视口底部到安全区域的距离(以CSS像素为单位)刘海全屏的条件下是 34px

    constant() 是CSS的函数,可以把以上几个距离转换成我们常用的属性值。

    1、当我们设置viewport-fit:contain,也就是默认的时候时;设置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等参数时不起作用的。

    2).当设置viewport-fit:cover时,具体使用方法为

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    body {
      padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
      padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
      padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
      padding-left: env(safe-area-inset-left); //如果未竖屏时为0
      padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
      padding-right: env(safe-area-inset-right); //如果未竖屏时为0
      padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
      padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px      
    }

    2.媒体查询

    @media screen and (device-375px) and (device-height:812px){
    //在这里做iPhone X的判断
     // #app {
        //margin-top: 88px;
      //}
    }

    3.@supports 隔离兼容模式

    @supports (bottom: env(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
     /*在这里做iphoneX的判断*/
      /*#app {*/
        /*margin-top: 88px;*/
      /*}*/
    }
  • 相关阅读:
    linux异常文件下载
    spring boot项目发布到tomcat端口问题
    jenkins.service changed on disk. Run 'systemctl daemon-reload' to reload units
    Job for jenkins.service failed because the control process exited with error code
    安装配置jenkins rpm方式
    Error creating bean with name 'eurekaAutoServiceRegistration': Singleton bean creation not allowed w
    Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these environ
    Cannot find class: org.mybatis.caches.ehcache.LoggingEhcache
    java.lang.IllegalArgumentException: invalid comparison: java.util.Date and java.lang.String
    Error:(12, 8) java: 无法访问javax.servlet.ServletException 找不到javax.servlet.ServletException的类文件
  • 原文地址:https://www.cnblogs.com/xiaoqi2018/p/10424647.html
Copyright © 2011-2022 走看看