内容摘要：简短的概括：Iphonex 刘海屏适配解决方案(项目常用)iphonex之后引入的新概念，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角、齐刘海、小黑条影响。Hybrid 页面在 iPho

简短的刘海概括：

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

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

//