H5页面适配 iPhoneX
iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。
笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图：
关于适配的几个知识点
1、安全区域（Safe area ）
确保不会被设备圆角(corners)，传感器外壳(sensor housing，齐刘海) 以及底部的 Home Indicator 遮挡。下图的蓝色区域为安全区域。
也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。
viewport-fit
iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：
- contain: 可视窗口完全包含网页内容（左图）
- cover：网页内容完全覆盖可视窗口（右图）
- auto：默认值，跟 contain 表现一致
注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。
env 函数
iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
- safe-area-inset-left：安全区域距离左边边界距离
- safe-area-inset-right：安全区域距离右边边界距离
- safe-area-inset-top：安全区域距离顶部边界距离
- safe-area-inset-bottom：安全区域距离底部边界距离
-
注：这四个值只有在viewport-fit=cover时才生效，默认值auto、或者viewport-fit=contain时是不生效的。
用法如下：
body {
padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: env(safe-area-inset-left); //如果为竖屏时为0
padding-right: env(safe-area-inset-right); //如果为竖屏时为0
padding-bottom: env(safe-area-inset-bottom);//为底下圆弧的高度 34px
}
适配步骤
第一步：设定mate标签
第二步：将页面主体内容设定在安全区域内
第三步：底部fixed元素的设定
类型一：fixed 完全吸底元素（bottom = 0）
比如下图这两种情况：
方法一、可以通过增加内边距padding：
但这用方式只适用于底部fixed元素背景色为白色的情况，像上图左，但上图右用此方法则不合适，因为橘色和红色部分也会填充padding，如下图那样：不受padding影响依旧在原来高度居中，但红色奇丑无比。
方法二、新增一个新的元素，用于小黑条高度的占位
新的元素快的属性如下：（没有改元素会有镂空哦）
原底部fixed的元素通过margin-bottom调整位置
类型二：bottom不为0;例如返回顶部、侧边广告这种不用完全置底。
这种只需fixed元素做位置调整即可
提示:
1、safe-area-inset-*并不是只可以用在body上面，他只是一个设定的常量，可以根据实际情况灵活用在不用元素身上。小编刚开始以为只能用在body上，走入了小误区。
2、对于iOS 内置浏览器会出现如下情况：长页面活动，镂空可见home键处文字。
如果有哪里错误忘指出。谢谢!