IPhone X兼容问题

前段时间除了IPhone X后，开发的app出现了一个兼容性问题。嵌入app的页面没有全屏铺满。那会尝试了一两天的解决办法，也没成功，最后在网上找到了一个解决方案，就是在头部加上这样一行代码<meta name="viewport" content="viewport-fit=cover">，刚开的简书，因此重新在这里记录下：

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

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

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

3、设置safe-area-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-top: constant(safe-area-inset-right);

     padding-top: constant(safe-area-inset-bottom);

     padding-top: constant(safe-area-inset-left);

}

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

上述参考自：http://blog.csdn.net/qq_36242361/article/details/78018845?locationNum=4&fps=1