Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

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

Posted on 2017年11月14日2017年11月14日 by king2088

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上的状况如下,简直是惨不忍睹啊!

iPhone X无法全屏有白边
iPhone X无法全屏有白边

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

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

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

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


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

iPhone X全屏
iPhone X全屏

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型号上的不适配问题啦!最终我得到的完美效果如下:

iPhone X完美全屏
iPhone X完美全屏

5 thoughts on “解决iPhone X上无法全屏的问题”

  1. 猪八戒说道:
    2017年11月14日 下午11:31

    学习了!谢谢

    回复
  2. 拉拉说道:
    2018年2月6日 下午4:52

    我的为啥不起作用,我现在是上下区域是黑的,但是无法做到全屏

    回复
    1. king2088说道:
      2018年2月26日 下午8:19

      请确保config.xml中的设置正确,并将相应的尺寸图片放到对应的文件夹

      回复
  3. gp说道:
    2018年3月23日 下午2:29

    我的也不起作用,config.xml 配置

    cordova-plugin-splashscreen
    cordova-plugin-statusbar 也升级最新的版本

    index.html 文件也修改了

    不过我使用的ionic 版本是1.7.16 cordova 版本是5.4.1, 使用的IPhone X 模拟器,效果还是 上下区域是黑的,但是无法做到全屏

    回复
    1. king2088说道:
      2018年4月6日 下午11:37

      ionic的版本太低了,建议至少升级到ionic2及以上版本,并且必须保证当前打包的ios为4.5.x及以上版本,才能正常进行全屏!

      回复

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme