序言
iPhoneX 撤销了物理学功能键，改为底部小黑条，这1修改致使网页页面出現了较为难堪的显示屏兼容难题。针对网页页面而言，顶部（刘海位置）的兼容难题访问器早已做了解决，因此大家只必须关心底部与小黑条的兼容难题便可（即普遍的吸底导航栏、回到顶部等各种各样相对性底部 fixed 精准定位的元素）。
笔者根据查阅了1些官方文本文档，和融合具体新项目中的1些解决工作经验，梳理了1套简易的兼容计划方案共享给大伙儿，期待对大伙儿有一定的协助，下列是解决前后左右实际效果图：
大伙儿都了解，iphoneX，显示屏顶部都有1个齐刘海，iPhoneX 撤销了物理学功能键，改为底部小黑条，假如不做兼容，这些地区就会被遮挡，因而本文讲述下齐刘海与底部小黑条的兼容方式。
几个新定义
安全性地区
安全性地区指的是1个可视性对话框范畴，处在安全性地区的內容不会受到圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）危害，以下图所示：
viewport-fit
iOS11 新增特点，iPhone企业以便兼容 iPhoneX 对现有 viewport meta 标识的1个拓展，用于设定网页页面在可视性对话框的合理布局方法，可设定 3个值 ：
值
叙述
auto
默认设置值，跟 contain 主要表现1致。网页页面內容显示信息在safe area内。 viewprot-fit:auto 等同于于 viewport-fit:contain
contain
可视性对话框彻底包括网页页面內容（左图）。网页页面內容显示信息在 safe area 内。 viewport-fit:contain
cover
网页页面內容彻底遮盖可视性对话框（右图）。网页页面內容填满显示屏。 viewport-fit:cover
constant 涵数
iOS11 新增特点，Webkit 的1个 CSS 涵数，用于设置安全性地区与界限的间距，有4个预订义的自变量（企业是px）：
safe-area-inset-left safe-area-inset-right safe-area-inset-top safe-area-inset-bottom
留意：网页页面默认设置不加上拓展的主要表现是 viewport-fit=contain，必须兼容 iPhoneX 务必设定viewport-fit=cover，要不然 constant 涵数是不起功效的，这是兼容的必要标准。
留意：网页页面默认设置不加上拓展的主要表现是 viewport-fit=contain ，必须兼容 iPhone 务必设定 viewport-fit=cover ，这是兼容的重要流程。
兼容事例
第1步：设定网页页面在可视性对话框的合理布局方法
<meta name='viewport' content="width=device-width, viewport-fit=cover" />
第2步：网页页面行为主体內容限制在安全性地区内
body {
/* 兼容齐刘海*/
padding-top: constant(safe-area-inset-top);
/* 兼容底部黑条*/
padding-bottom: constant(safe-area-inset-bottom);
}
第3步：fixed 元素的兼容
bottom 并不是0的状况
/* bottom 并不是0的状况 */
.fixed {
bottom: calc(50px(原先的bottom值) + constant(safe-area-inset-bottom));
}
吸底的状况（bottom=0）
/* 方式1 ：设定内边距 拓展高宽比*/
/* 这个计划方案必须吸底条务必是有情况色的，由于拓展的一部分情况是追随外器皿的，不然出現镂空状况。*/
.fix {
padding-bottom: constant(safe-area-inset-bottom);
}
/* 立即拓展高宽比*/
.fix {
height: calc(60px(原先的高宽比值) + constant(safe-area-inset-bottom));
}
/* 方式2 ：在元素下面用1个空div填充， 可是情况色要1致 */
.blank {
position: fixed;
bottom: 0;
height: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
background-color: #fff;
}
/* 吸底元素款式 */
.fix {
margin-bottom: constant(safe-area-inset-bottom);
}
最终： 应用@supports
由于仅有有齐刘海和底部黑条的机型才必须兼容款式，能够用@support相互配合应用：
@supports (bottom: constant(safe-area-inset-bottom)) {
body {
padding-bottom: constant(safe-area-inset-bottom);
}
}
详细检验编码
@supports防护适配方式
由于仅有有齐刘海和底部黑条的机型才必须兼容款式，能够用@support相互配合应用：
@mixin iphonex-css {
padding-top: constant(safe-area-inset-top); //为导航栏栏+情况栏的高宽比 88px
padding-top: env(safe-area-inset-top); //为导航栏栏+情况栏的高宽比 88px
padding-left: constant(safe-area-inset-left); //假如未竖屏时为0
padding-left: env(safe-area-inset-left); //假如未竖屏时为0
padding-right: constant(safe-area-inset-right); //假如未竖屏时为0
padding-right: env(safe-area-inset-right); //假如未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高宽比 34px
padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高宽比 34px
}
@mixin iphonex-support {
@supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
body.iphonex {
@include iphonex-css;
}
}
}
@media 新闻媒体查寻
@mixin iphonex-css {
padding-top: constant(safe-area-inset-top); //为导航栏栏+情况栏的高宽比 88px
padding-top: env(safe-area-inset-top); //为导航栏栏+情况栏的高宽比 88px
padding-left: constant(safe-area-inset-left); //假如未竖屏时为0
padding-left: env(safe-area-inset-left); //假如未竖屏时为0
padding-right: constant(safe-area-inset-right); //假如未竖屏时为0
padding-right: env(safe-area-inset-right); //假如未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高宽比 34px
padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高宽比 34px
}
/* iphonex 兼容 */
@mixin iphonex-media {
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
body.iphonex {
@include iphonex-css;
}
}
}
填补
留意项
env 和 constant 仅有在 viewport-fit=cover 情况下才可以起效, 上面应用的safari 的操纵台能够检验仿真模拟器中网页页面打开web inspector.
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。