H5 页面- iPhoneX 刘海屏适配

简短的刘海概括：

Iphonex 刘海屏适配解决方案(项目常用)

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

H5刘海屏 - 基础

很明显，屏适配在讨论适配之前，刘海我们的屏适配页面一般有两种分类：

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

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

一、刘海屏显示

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

二、屏幕尺寸适配

H5刘海屏 - 实践

一、原理与源码

1､viewport-fit

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

1) auto 默认;

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

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

2､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 来控制页面元素避开非安全区域。

二、页面适配代码

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

<meta name="viewport" content="viewport-fit=cover"> 

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､精确到机型做适配

通过宽高、像素比来判断机型，服务器托管也可以做具体适配：

//