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

2017/11/14移动端 标签:5

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中增加如下两行代码:

<platform name="ios">
..........
    <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    <splash height="1242" src="resources/ios/splash/Default@3x~universal~anyany.png" width="2208" />
..........
</platform>

我们可以看到相关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样式啦,方法并不困难,请看下面的代码:

<!-- iPhone X -->
  <script>
      //通过平台、分辨率、浏览器来判断iPhone X设备
      if(window.screen.width * window.devicePixelRatio === 1125 && window.screen.height * window.devicePixelRatio === 2436 && navigator.platform === 'iPhone' && !(navigator.userAgent.toLowerCase().indexOf("safari") > -1 && navigator.userAgent.toLowerCase().indexOf("chrome") < 0)){
      var addStyletoIphoneX = function(){
        var styleElems=document.getElementsByTagName("style");
        if(styleElems.length==0){
          var tempStyle=document.createElement("style");
          tempStyle.setAttribute("type","text/css");
          document.getElementsByTagName("head")[0].appendChild(tempStyle);
        }
        var styleElem=styleElems[0];
        //增加相关的CSS样式
        styleElem.appendChild(document.createTextNode(
          "header{padding-top: 20px; background-color: " + globals.config.layout.themeColor + "}.tabs{padding-bottom: 20px;}modifier-selector.ion-page{top: 4vh;bottom: 4vh;}.footer{margin-bottom: 28px;}"
        ));
      }
      setTimeout(addStyletoIphoneX,10);
      }
    </script>

这样一来就可以完美解决问题啦,你不用再纠结如何再去写更多的CSS样式或者直接去修改CSS样式而导致其他iPhone型号上的不适配问题啦!最终我得到的完美效果如下:

iPhone X完美全屏

iPhone X完美全屏

5个 评论 关于 解决iPhone X上无法全屏的问题

  1. 猪八戒 says:

    学习了!谢谢

  2. 拉拉 says:

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

  3. gp says:

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

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

    index.html 文件也修改了

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

    • king2088 says:

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

发表评论

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

60 + 0 = ?