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”]
……….
我们可以看到相关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型号上的不适配问题啦!最终我得到的完美效果如下:
学习了!谢谢
我的为啥不起作用,我现在是上下区域是黑的,但是无法做到全屏
请确保config.xml中的设置正确,并将相应的尺寸图片放到对应的文件夹
我的也不起作用,config.xml 配置
cordova-plugin-splashscreen
cordova-plugin-statusbar 也升级最新的版本
index.html 文件也修改了
不过我使用的ionic 版本是1.7.16 cordova 版本是5.4.1, 使用的IPhone X 模拟器,效果还是 上下区域是黑的,但是无法做到全屏
ionic的版本太低了,建议至少升级到ionic2及以上版本,并且必须保证当前打包的ios为4.5.x及以上版本,才能正常进行全屏!