vue x 兼容iphone_微信H5兼容iPhoneX

问题抛出，主要是因为iphoneX屏幕的齐刘海和底部滑条带来的一些操作问题。

解决方案一(不针对微信H5或者手QH5)

1.iPhoneX的适配，在iOS 11中采用了viewport-fit的meta标签作为适配方案；viewport-fit的默认值是auto。

关于 viewport-fit

1.viewport-fit 有三个可选值：

contain: 最初的布局视窗和视觉布局视窗被设置为最大的矩形。在Viewport之外的UA绘制的是未定义的，它可能是画布的背景色，或者UA认为合适的其他东西；

cover:  初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形；

auto: 这个值不影响初始布局视窗，整个Web页面是可视的。在视窗之外的UA绘制的是未定义的，它可能是画布的背景色，或者是UA认为合适的其他东西；

2.在iOS 11中的WebKit包含了一个新的CSS函数constant()，以及一组四个预定义的常量：

safe-area-inset-left,

safe-area-inset-right,

safe-area-inset-top，

safe-area-inset-bottom。

当使用viewport-fit等于auto或者contain的时候，4个预定于的常量设置是不生效的。

3.通过给页面设置viewport-fit=cover，可以将页面的布局区域延伸到页面顶部和底部。

然后就可以自定义设置你喜欢的内边距大小，或者使用IOS 11中的预设常量。

body{

padding-top: const