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);

      

  • 相关阅读:
    ArrayList用法
    MessageBox
    将文本文件导入Sql数据库
    在桌面和菜单中添加快捷方式
    泡沫排序
    Making use of localized variables in javascript.
    Remove double empty lines in Visual Studio 2012
    Using Operations Manager Connectors
    Clear SharePoint Designer cache
    Programmatically set navigation settings in SharePoint 2013
  • 原文地址:https://www.cnblogs.com/changxue/p/10562568.html
Copyright © 2011-2022 走看看