iphoneX全屏适配

iphoneX的面部识别功能很强大。但是在浏览器屏幕显示上，在观看上不会引起问题，但是在默认情况下会有一些显示问题。

1、因为正常情况下会有上下两个白色的边框，如果网页背景色不是白色或者其他单色的颜色会显得非常突兀，

解决方式：给body标签加上background-color，背景色为网页颜色。

2、如果你喜欢对设计有额外的控制，或者使用渐变或图像作为背景，那么设置背景颜色可能是不可行的。在苹果的iOS的最新版本增加了viewport-fit，全屏幕显示网页，在meta标签把viewport设定为

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

3、设置safe-srea-inset-*确保安全边界：

因为横屏时画面右侧会被那一块感应器给挡住，而Home Bar等空间由于保留给系统使用，链接也会失效，会造成体验不良的状况。Apple提供了几个CSSProperties来处理：

constant(safe-area-inset-top)

constant(safe-area-inset-right)

constant(safe-area-inset-bottom)

constant(safe-area-inset-left)

在设置viewport-fit后使用这几个css属性：

.container {
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);
}
就可以修正全屏时内容与系统保留区重叠的问题。

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){

body{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}

.iphonex-pt{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
.iphonex-pb{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.iphonex-mt{
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}
.iphonex-mb{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
.iphonex-pl{
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
}
.iphonex-pr{
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
}
.iphonex-ml{
margin-left: constant(safe-area-inset-left);
margin-left: env(safe-area-inset-left);
}
.iphonex-mr{
margin-right: constant(safe-area-inset-right);
margin-right: env(safe-area-inset-right);
}
.iphonex-bd-top-bg{
border-top: 88px solid transparent;
}
.iphonex-bd-top{
border-top: 44px solid transparent;
}
.iphonex-bd-bottom{
border-bottom: 34px solid transparent;
}
}

3.js 方法，有些接口必须用js 去处理，不能用css样式实现，那么就可以这样做

if((window).height() === 724 && window.devicePixelRatio === 3){

    $(".phonex-pb").css("padding-bottom","34px");

}