zoukankan      html  css  js  c++  java
  • 如何适配处理iphoneX底部的横条

      iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条“Home Indicator”。当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适配解决呢?

      第一步:

        <meta name=“viewport” content=“width=device-width, viewport-fit=cover”>

      第二步:

        页面主体内容限定在安全区域内,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况

        body { padding-bottom: env(safe-area-inset-bottom); }

      第三步:

        fixed 元素的适配  

        第一种:padding-bottom: env(safe-area-inset-bottom);
            注意元素是否设置box-sizing:border-box;否则不起作用,道理就不说了。
        第二种:height: calc(60px(假设值) + env(safe-area-inset-bottom));
        第三种:margin-bottom: env(safe-area-inset-bottom);

        这三种方式都可解决,视情况而定选择合适的,也可以灵活为fixed 元素的子元素添加这些属性

      

      使用 @supports
        一般只希望 iPhoneX 才需要新增适配样式,可以配合 @supports 编写样式:
        @supports (bottom: env(safe-area-inset-bottom)) {
          div {
            margin-bottom: env(safe-area-inset-bottom);
          }
        }

      

      下面是一些拓展知识点:

        1.iphoneX业界刘海屏幕第一款机型,导致全屏不能正常的全屏显示了,所以需要对iphonx 适配

          <meta name="viewport" content="viewport-fit=contain">
          <meta name="viewport" content="viewport-fit=cover">
          <meta name="viewport" content="viewport-fit=auto">

          viewport-fit:
            contain: 可视化窗口完全包含网页内容
            cover: 网页内容完全覆盖
            auto: 默认值和 contain 一样

        2.ios11 增加新特性,webkit 的 css 函数

          四个预定义变量为设定安全区域和边界的距离,如下:
            safe-area-inset-left:安全区域距离左边边界距离
            safe-area-inset-right:安全区域距离右边边界距离
            safe-area-inset-top:安全区域距离顶部边界距离;在刘海全屏的时候 top 为 44px
            safe-area-inset-bottom:安全区域距离底部边界距离;刘海全屏的条件下是 34px

          

          css 函数 env() 和 constant()
            上面两个函数可以直接使用变量函数,只有在 webkit 内核下才支持
            env() 必须在 ios >= 11.2 才支持
            constant() 必须 ios < 11.2 支持
            env 和 constant 只有在 viewport-fit=cover 时候才能生效
            兼容前后版本,例子:
              padding-top: constant(safe-area-inset-top);
              padding-top: env(safe-area-inset-top);

      

  • 相关阅读:
    [BZOJ2324][ZJOI2011]营救皮卡丘
    P4324 [JSOI2016]扭动的回文串
    P5068 [Ynoi2015]我回来了
    P4412 [SHOI2004]最小生成树
    bzoj3118: Orz the MST(线性规划+单纯形法)
    bzoj3265: 志愿者招募加强版(线性规划+单纯形法)
    bzoj3550: [ONTAK2010]Vacation(单纯形法+线性规划)
    uoj#179. 线性规划
    P2093 [国家集训队]JZPFAR(KDTree)
    P3538 [POI2012]OKR-A Horrible Poem
  • 原文地址:https://www.cnblogs.com/changxue/p/10562568.html
Copyright © 2011-2022 走看看