iPhoneX 取消了物理学功能键，改为底端小白条，这一修改造成 网页页面出現了较为难堪的显示屏兼容难题。针对网页页面来讲，顶端(流海位置)的兼容难题电脑浏览器早已干了解决，因此 大家只必须关心底端与小白条的兼容难题就可以(即普遍的吸底导航栏、回到顶部等各种各样相对性底端 fixed 精准定位的原素)。
创作者：佚名来源于：Aotu.io|2017-11-28 15:29 手机端 个人收藏 共享CTO夏令营 | 十二月3-五日，深圳市，现在是时候变成出色的技术性管理人员了
iPhoneX 取消了物理学功能键，改为底端小白条，这一修改造成 网页页面出現了较为难堪的显示屏兼容难题。针对网页页面来讲，顶端(流海位置)的兼容难题电脑浏览器早已干了解决，因此 大家只必须关心底端与小白条的兼容难题就可以(即普遍的吸底导航栏、回到顶部等各种各样相对性底端 fixed 精准定位的原素)。
小编根据查看了一些官方网文本文档，及其联系实际新项目中的一些解决工作经验，梳理了一套简易的兼容计划方案共享给大伙儿，期待对大伙儿有一定的协助，下列是解决前后左右设计效果图：
兼容以前必须掌握的好多个新专业知识
安全性地区
安全性地区指的是一个可视性对话框范畴，处在安全性地区的內容不会受到圆弧(corners)、平刘海(sensor housing)、小白条(Home Indicator)危害，如下图深蓝色地区：
换句话说，我们要搞好兼容，务必确保网页页面可视性、可实际操作地区是在安全性地区内。
更详细描述，参照文本文档： Human Interface Guidelines - iPhoneX
viewport-fit
iOS11 增加特点，美国苹果公司为了更好地兼容 iPhoneX 对目前 viewport meta 标识的一个拓展，用以设定网页页面在可视性对话框的合理布局方法，可设定三个值：
contain: 可视性对话框彻底包括网页页面(左图)
cover：网页页面彻底遮盖可视性对话框(下图)
auto：初始值，跟 contain 主要表现一致
留意：网页页面默认设置不加上拓展的主要表现是 viewport-fit=contain，必须兼容 iPhoneX 务必设定 viewport-fit=cover，它是兼容的关键因素。
更详细描述，参照文本文档： viewport-fit-descriptor
constant 涵数
iOS11 增加特点，Webkit 的一个 CSS 涵数，用以设置安全性地区与界限的间距，有四个预订义的自变量：
safe-area-inset-left：安全性地区间距左侧界限间距
safe-area-inset-right：安全性地区间距右侧界限间距
safe-area-inset-top：安全性地区间距顶端界限间距
safe-area-inset-bottom：安全性地区间距底端界限间距
这儿大家只必须关心 safe-area-inset-bottom 这一自变量，因为它相匹配的便是小白条的高宽比(横纵屏正值不一样)。
留意：当 viewport-fit=contain 时 constant 涵数是失灵的，务必要相互配合 viewport-fit=cover 应用。针对不兼容 constant 的电脑浏览器，电脑浏览器可能忽视它。
官方网文本文档中提及 env 涵数将要要更换 constant 涵数，小编检测过临时还不能用。
更详细描述，参照文本文档： Designing Websites for iPhone X
怎样兼容
了解了之上常说的好多个知识要点，接下去大家兼容的构思就很清楚了。
第一步：设定网页页面在可视性对话框的合理布局方法
增加 viweport-fit 特性，促使网页页面內容彻底遮盖全部对话框：
metaname="viewport"content="width=device-width, viewport-fit=cover"
前边也是有提及过，仅有设定了 viewport-fit=cover，才可以应用 constant 涵数。
第二步：网页页面行为主体內容限制在安全性地区内
这一步依据具体网页页面情景挑选，如果不设定这一值，很有可能存有小白条挡住网页页面最底端內容的状况。
body {
padding-bottom: constant(safe-area-inset-bottom);
}
第三步：fixed 原素的兼容
种类一：fixed 彻底吸底原素(bottom = 0)，例如下面的图这二种状况：
能够根据加内边距 padding 拓展高宽比：
{
padding-bottom: constant(safe-area-inset-bottom);
}
或是根据测算涵数 calc 遮盖原先高宽比：
{
height: calc(60px(假定值) constant(safe-area-inset-bottom));
}
留意，这一计划方案必须吸底条务必是有背景颜色的，由于拓展的一部分情况是追随外器皿的，不然出現镂空雕花状况。
也有一种计划方案便是，能够根据增加一个新的原素(空的色调块，关键用以小白条高宽比的占位性病变)，随后吸底原素可以不更改高宽比只必须调节部位，像那样：
{
margin-bottom: constant(safe-area-inset-bottom);
}
空的色调块：
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
background-color: #fff;
}
种类二：fixed 非彻底吸底原素(bottom 0)，例如 回到顶部、侧面广告宣传 等
像这类仅仅部位必须相匹配往上调节，能够仅根据外边距 margin 来解决：
{
margin-bottom: constant(safe-area-inset-bottom);
}
或是，你也能够根据测算涵数 calc 遮盖原先 bottom 值：
{
bottom: calc(50px(假定值) constant(safe-area-inset-bottom));
}
别忘记应用 @supports
写到这儿，大家普遍的二种种类的 fixed 原素兼容计划方案早已掌握了吧，但别忘记，一般大家只期待 iPhoneX 才必须增加兼容款式，我们可以相互配合 @supports 那样撰写款式：
@supports (bottom: constant(safe-area-inset-bottom)) {
div {
margin-bottom: constant(safe-area-inset-bottom);
}
}
