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

  

如何适配处理iphoneX底部的横条 - ios的更多相关文章

  1. 小程序以及H5页面上IphoneX底部安全区域小黑条适配问题

    背景 公司项目开发中,发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX .iPhone XR等机型上,物理Home键被取消,改为底部小黑条替代home键功能,从而导致吸 ...

  2. ios 适配iOS11&iPhoneX的一些坑

    前阵子项目开发忙成狗,就一直没做iOS11的适配,直到XcodeGM版发布后,我胸有成竹的在iPhoneX上跑起项目,整个人都凉透了...下面总结一下我遇到的坑,不是很全面,日后补充. 导航栏 导航栏 ...

  3. VMware全屏时, 隐藏上方工具栏横条

    VMware全屏时, 隐藏上方横条 菜单栏打开 编辑 选择 首选项 找到 显示 取消勾选 在全屏时取消固定时显示工具栏边缘

  4. Python_Selenium之浏览器封装_去掉浏览器受到自动化控制横条显示及去掉是否记住密码弹窗

    封装如下: from selenium import webdriverfrom common.config_utils import configfrom selenium.webdriver.ch ...

  5. ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。

    js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...

  6. 微信小游戏广告位iphonex底部适配问题

    最近在公司开发游戏,使用cocos creator做微信小游戏,遇到一个很恶心的问题,如图: 如图所示,微信的广告位被iphonex的底部bar给弹出了一点位置,没有靠在底部. 在这里不得不吐槽一下微 ...

  7. wap2app(八)-- iphoneX 底部导航的兼容问题

    iphoneX 没有home键,用其打开应用时,iphoneX的底部和应用底部导航重叠,不兼容. 解决办法: 打开manifest.json文件,在“plus”下加入以下代码(安全区域): " ...

  8. SWIFT显示底部的工具条

    有以下页面显示我的讯息,用户可以点击右上角的编辑按钮进入删除状态.点击编辑按钮后,按钮文字改为“取消”,左上角的按钮变为“全选”,同时显示底部工具条带有“删除”按钮 实现起来挺简单的,在正常状态下点击 ...

  9. cordova 5.4版本 适配全面屏 底部黑边问题

    在全面屏发布之后,Android官方提供了适配方案,即提高App所支持的最大屏幕纵横比,实现很简单,在AndroidManifest.xml中可做如下配置: 更改android.max_aspect值 ...

随机推荐

  1. nginx让用户通过用户名密码认证访问web页面

    在使用nginx转发的时候,要进行一次用户身份的确认. 1)通过htpasswd命令生成用户名及对应密码数据库文件. [root@bgs-5p173-wangwenting ~]# htpasswd ...

  2. python基础之02列表/元组/字典/set集合

    python中内置的数据类型有列表(list)元组(tuple)字典(directory). 1 list list是一种可变的有序的集合.来看一个list实例: #第一种方法: >>&g ...

  3. python的函数介绍 位置参数 关键字参数 默认参数 参数组 *args **kwargs

    1.数学意义的函数与python中的函数 数学意义的函数 y = 2*3+1 x =3 y =7 x是自变量,y是因变量 2.python中定义函数的方法 一个函数往往都是为了完成一个特定的功能而存在 ...

  4. 使用tkinter做简单计算器

    代码如下: from tkinter import * #导入tkinter库 root =Tk() #给窗体 root.title('calculator') #设置窗体名字 frm=Frame(r ...

  5. JavaScript中的arguments详解

    1. arguments arguments不是真正的数组,它是一个实参对象,每个实参对象都包含以数字为索引的一组元素以及length属性. (function () { console.log(ar ...

  6. Java基础-包(package)的声明与访问

    Java基础-包(package)的声明与访问 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.包的概念 Java中的包,其实就是我们电脑系统中的文件夹,包里存放的是程序员生成的 ...

  7. 转:实现OC与JS的简易交互

    oc-->js stringByEvaluatingJavaScriptFromString,其参数是一NSString 字符串内容是js代码(这又可以是一个js函数.一句js代码或他们的组合) ...

  8. asp.net WebForm程序删除.designer.cs文件之后的故事

    1.介绍 正常情况下添加一个WebForm程序结构如下(命名为:myWebForm.aspx) 文件说明:.aspx文件:书写html代码部分,以及javascript,css等代码书写及引用 .as ...

  9. HDU 2095 find your present (2) 动态链表

    解题报告:输入一个n,后面紧跟着输入n个数,输入的这n个数中,除了有一个数的个数为奇数外,其它的数的个数都是偶数个,现在要你找出这个个数为奇数的这个数. 看起来好像很简单的样子,不过,这题的重点不在这 ...

  10. opencv的基本数据结构(二)(转)

    转自:原文链接,以下代码.图片.内容有点改动,只为转载不降低博客内容的可阅性,版权归原作者所有. OpenCV中强大的Mat类型大家已经比较熟悉了.这里梳理一些在工程中其他经常用到的几种基本数据类型. ...