解决iPhone X上无法全屏的问题

iPhone X的齐刘海确实挺有型的，但是个人并不喜好。最近测试人员对app进行测试的时候发现了iPhone X上的显示效果超级恶心，无法全屏等各种问题，由此不得不解决这个问题。据了解这个问题是iPhone X自带的问题，不过在apple官方并没有找到相关解决办法，网上找了一番，找到相关的解决办法了。
本文主要参考以下两篇文章内容，两篇文章结合起来才能得到相关的解决办法
https://forum.ionicframework.com/t/iphone-x-and-ionic/105197/14
http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

1、在meta中增加viewport-fit=cover属性

在未增加这个属性之前，我们可以看到我们的应用程序在iPhone X上的状况如下，简直是惨不忍睹啊！

这个增加之后发现之前存在的上下白色边框不见了，但是却变成了如下的状况，也就是无法进行全屏！

上图中，我们还是没有达到全屏的效果，期间我尝试过更新statusbar等插件，也无法实现全屏的效果。

2、增加符合iPhone X的splash图片

根据上面我提供的两个网址中，我在ionicframework论坛上找到了另一个解决办法，解决方法就是增加两张符合iPhone X屏幕尺寸的splash.png即可，我们可以在config.xml中增加如下两行代码：
[cc lang=”xml”] ……….


………. [/cc]
我们可以看到相关2张图片的尺寸分别为： 2732*2732 以及 2208*1242
只需要增加这两张图片，我们即可实现全屏的效果啦！可以看到如下图的效果啦

3、响应式解决方案

虽然上面我们利用css确实解决了iPhone X全屏的问题，但是可能我们的CSS依然存在问题，比如我们的头部文字被齐刘海挡住了，底部的tabs直接在home条的位置，给用户造成了非常不方便的体验，那么我们就得修改相关的CSS来调试，不过请记住，如果我们修改了CSS，那么在其他iPhone上又会有css的问题，因此我想到了一个两全其美的办法
那就是判断当前设备是否是iPhone X，但是根据个人的知识并无法直接在iPhone中使用javascript判断出当前设备是iPhone的那个型号，因此只能使用判断分辨率以及平台来确定当前设备是否是iPhone X了，iPhone X的分辨率为1125*2436
得到设备是iPhone X后，我们就可以利用javascript动态添加相关的CSS样式啦，方法并不困难，请看下面的代码：
[cc lang=”javascript”]
[/cc]
这样一来就可以完美解决问题啦，你不用再纠结如何再去写更多的CSS样式或者直接去修改CSS样式而导致其他iPhone型号上的不适配问题啦！最终我得到的完美效果如下：