H5 页面- iPhoneX 刘海屏适配

·  阅读 1817

Iphonex 刘海屏适配解决方案

iphonex之后引入的新概念,安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角、齐刘海、小黑条影响。Hybrid 页面在 iPhoneX 上刘海屏的适配也是每个前端开发的小伙伴都会碰到的问题,今天就记录一下关于刘海屏适配的部分经验。

一、H5刘海屏 - 基础

很明显,在讨论适配之前,我们的页面一般有两种分类:

1、H5 页面使用原生 App 的 Navigation Bar 导航栏,此时,status bar 状态栏和导航栏都是原生控件,我们只需要专注的适配底部小黑条处的高度差异即可。

2、H5 页面在 iOS 中占据全屏页面,在这种情况下,除了要兼顾底部小黑条,我们还要处理页面上部跟 状态栏接触的部分,避免内容出现在状态栏上。

1、刘海屏显示

iPhone8之前的常规屏幕和刘海屏 Safe Area 区域的对比图。

2、屏幕尺寸适配

二、H5刘海屏 - 实践

1、原理与源码

  1. viewport-fit

iOS11 新增特性,苹果公司为了适配 iPhoneX等刘海屏, 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置 三个值:

  1. auto 默认;

  2. contain 可视窗口完全包含网页内容;

  3. cover 网页内容完全覆盖可视窗口,即页面完全充满屏幕;

  4. constant(safe-area-inset-*)函数

iOS11 新增特性,Webkit 的一个 CSS 函数,用于设获取安全区域与边界的距离,有四个预定义的变量(单位是px):

  1. safe-area-inset-left:安全区域距离左边界距离,横屏时适配;

  2. safe-area-inset-right:安全区域距离右边界距离,横屏时适配;

  3. safe-area-inset-top:安全区域距离顶部边界距离,竖屏下刘海屏为44px,iphone6系列20px,竖屏刘海适配关键;

  4. safe-area-inset-bottom:安全区域距离底部边界距离,竖屏下为34px,竖屏小黑条适配关键;

适配的核心是:通过 constant() 可以获取到非安全边距,再结合 padding 或 margin 来控制页面元素避开非安全区域。

2、页面适配代码

  1. 在为页面适配刘海屏之前,我们首先得在页面的 meta 中添加一个新的值:

  2. 设置高度:

    //为导航栏+状态栏的高度 88px padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);

    //为底下圆弧的高度 34px padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);

扩展:css 函数 env() 和 constant()

这两个函数都是 webkit 中 css 函数,可以直接使用变量函数,只有在 webkit 内核下才支持。

  1. env 函数:必须在 ios >= 11.2 才支持;

  2. constant 函数:必须 ios < 11.2 支持

三、H5刘海屏 - 机型适配

1、精确到机型做适配

通过宽高、像素比来判断机型,也可以做具体适配:

// ******* 正常 ios手机 刘海屏处理 ***********/
// iphoneX、iphoneXs、iphone11 Pro
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
// iphone 12、iphone 12 Pro
only screen and (device-width: 390px) and (device-height: 884px) and (-webkit-device-pixel-ratio:3),
// iphone Xs Max、iphone11 Pro Max
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3),
// iphone XR、iphone 11
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2),
// iphone 12 Pro Max
only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio:3){
  // 头部刘海屏设置
  .title-bar {
    padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
    padding-top: env(safe-area-inset-top);
  }
  // 底部刘海屏设置
  .tab-bar {
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
    padding-bottom: env(safe-area-inset-bottom);
  }

}
复制代码

2、踩坑日志

  1. 通过css3的calc计算距离

padding-top: calc(constant(safe-area-inset-top) - 68px);
padding-top: calc(env(safe-area-inset-top) - 68px);

当使用 yarn install 或者 npm install 安装依赖包会有报错:

解决方案:用的 cnpm install。

  1. h5兼容iPhoneX底部刘海屏

当把按钮使用绝对定位到屏幕底部的时候,iPhonex底部刘海屏会遮挡底部按钮,这时候只需加一句代码就可解决问题。

.iPhonex-style{
 	bottom:evn(safe-area-inset-buttom);
}
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改