文档章节

如何适配处理iphoneX底部的横条 - ios

o
 osc_n6euf5h6
发布于 2019/03/20 07:16
字数 539
阅读 97
收藏 0

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

 

 

  

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

如何在Ruby中生成随机字符串 - How to generate a random string in Ruby

问题: I'm currently generating an 8-character pseudo-random uppercase string for "A" .. "Z": 我目前正在为“ A” ..“ Z”生成一个8个字符的伪随机大写字符串: value = ""; 8.times{......

法国红酒甜
今天
20
0
Python中的mkdir -p功能[重复] - mkdir -p functionality in Python [duplicate]

问题: This question already has an answer here: 这个问题在这里已有答案: How can I safely create a nested directory? 如何安全地创建嵌套目录? 25 answers 25个答案 Is there a way...

技术盛宴
今天
21
0
原价500元的认证证书,限时免费考取!

本文作者:y****n 百度云智学院致力于为百度ABC战略(人工智能、大数据、云计算)提供人才生态体系建设,包括基于百度ABC、IoT的课程体系,整合百度优势技术能力的深度学习技术、Apollo无人车...

百度开发者中心
昨天
17
0
在virtualenv中使用Python 3 - Using Python 3 in virtualenv

问题: Using virtualenv , I run my projects with the default version of Python (2.7). 使用virtualenv ,我使用默认版本的Python(2.7)运行项目。 On one project, I need to use Pyth......

富含淀粉
今天
16
0
Python的__init__和self是做什么的? - What __init__ and self do on Python?

问题: I'm learning the Python programming language and I've came across something I don't fully understand. 我正在学习Python编程语言,遇到了一些我不太了解的东西。 In a method ......

javail
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部