解决iphoneX显示问题的几个css属性

网上的删除iPhoneX白边的文章：http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

https://juejin.im/entry/59bde53ff265da065e321ca0?utm_source=gold_browser_extension

众所周知，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);
}

就可以修正全屏时内容与系统保留区重叠的问题。