微信小程序iPhoneX 底部虚拟Home键区域适配方案 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序iPhoneX 底部虚拟Home键区域适配方案

发表时间:2020-10-10

发布人:葵宇科技

浏览次数:109

微信小程序iPhoneX 底部虚拟Home键区域适配方案

为什么要适配?

先看下iPhoneX和之前的iPhone的区别,如下图

iPhoneX安全区

可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会导致:

  1. 内容被遮挡;
  2. 内容和虚拟Home键重叠而引起误操作;

因此,我们需要对iPhoneX进行一些必要的适配。

怎么适配?

因为我们要做的是微信小程序的适配,而我们开发的页面运行在微信里面,顶部空间微信已经做了适配,所以我们仅需对底部虚拟Home键区域进行适配即可(自定义导航例外)。

这里有两种情况:

  1. 底部无悬浮物件的情况
  2. 底部有悬浮物件的情况

底部无悬浮物件的情况

只要把页面内容容器的下内边距设置为虚拟Home键区域的高度即可。

底部有悬浮物件的情况

需把悬浮物件的下内边距设置为虚拟Home键区域的高度,并且页面内容容器的下内边距设置为悬浮物件的高度(原悬浮物件高度+虚拟Home键区域高度)。

具体实现

  • 虚拟Home键区域的高度:

    iOS11 的Webkit 的新增了一个 CSS env(),用于获取安全区域与边界的距离,有四个预定义的变量:

    • safe-area-inset-left:安全区域距离左边边界距离
    • safe-area-inset-right:安全区域距离右边边界距离
    • safe-area-inset-top:安全区域距离顶部边界距离
    • safe-area-inset-bottom:安全区域距离底部边界距离
  • 定义css变量

    page{
      /* 使用css变量定义安全边距 */
      --iphonex-fix-bottom:0;
      --iphonex-fix-bottom: constant(safe-area-inset-bottom); /* iOS11.2 beta 开始被弃用 */
      --iphonex-fix-bottom: env(safe-area-inset-bottom);
    }
    
  • 应用安全边距

    .container{
      /* 应用安全边距 */
      padding-bottom:var(--iphonex-fix-bottom);
    }
    

具体实现代码见以下代码片段:

https://developers.weixin.qq.com/s/cgxGsZmj7ukG

相关案例查看更多