Phonegap之ios对iPhone6和Plus的闪屏适配 -- xmTan

  故事的发生起于,由于老板强烈要求app在iPhone6和5有一样的工具栏,然后前端妹子用@media为iPhone6和Plus做了样式适配。然后问题来了,竟然奇葩的发现@media样式只对iPhone4和5起了作用,然后在6和6S的样式效果和5是一样的,奇了怪了!

  然后我去查找原因,无意中去获取设备屏幕宽高时发现了这神奇的现象:

CGRect screenBounds = [[UIScreen mainScreen] bounds];
NSString *str = NSStringFromCGRect(screenBounds);
NSLog(@"%@", str); 

  按正常逻辑来说,6和6S的打印结果应该为:{{0, 0}, {375, 667}},   然后6Plus和6S Plus的打印结果为:{{0, 0}, {414, 736}}

顿时感觉到这个应该是导致@medie样式对6和Plus不起作用的原因!

  然后另外还发现了,app的启动图片,也是所谓的”闪屏”(splash),6和6S、Plus都共用了iPhone5的启动图片: Default-568h@2x~iphone.png。就算你在app的资源文件夹splash那里增加了图片:Default-667h@2x~iphone.png和Default-736h@3x~iphone.png, 可是打包到6和Plus上时,加载的启动图片还是568h, 这是怎么的一回事呢?

然后开始的各种查,最后问题解决了,先把解决办法说一下,三个条件:

1、在ios app项目的工程文件***.info里加上针对启动图片的配置,配置内容:

<key>UILaunchImages</key>
  <array>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{320, 480}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{320, 480}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-568h</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{320, 568}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-568h</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{320, 568}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-667h</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{375, 667}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-667h</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{375, 667}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-736h</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{414, 736}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-Landscape-736h</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{414, 736}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-Portrait</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{768, 1024}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-Landscape</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{768, 1024}</string>
      </dict>
  </array>

  截图:

2、资源文件夹splash里除了原有的启动图片,再增加对6和Plus的适配启动图片,命名和图片宽高和工程配置里的配置一致:

6和6S: Default-667h@2x~iphone.png,     750 * 1334

  6Plus和6S Plus: Default-736h@3x~iphone.png,    828 * 1472

  截图:

完成前面两个条件之后,然后@media样式也起作用了,6和Plus的启动图片也起作用了,但是对于6和Plus的启动过程,前后会出现两张启动图片:

先出现了667h或736h图片之后,又紧接着很明显的出现了Default@2x~iphone.png (640 * 960)这张启动图片。

3、所以为了解决这个问题,还得去更新Cordova提供的最新插件:Splashscreen Plugin

   截图:

  然后把下载的最新CDVSplashScreen.h和*.m文件去替换项目中原有的该文件,然后就大功告成了,@media样式也起作用了,工具栏在5和6上一样了,4、5、6也各自加载了各自的启动(闪屏)图片了!

-------- ----- ---- ------ ------- ------ ------- ------ 

查询和参考的资料:

1、stackoverflow上一个6闪屏适配问答:http://stackoverflow.com/questions/26283372/phonegap-and-iphone-6-plus-splash-screen-issue

2、 Apache中Cordova官网关于icons和Splash Screens的介绍:http://cordova.apache.org/docs/en/latest/config_ref/images.html

3、cordova更新的SplashScreen插件地址:https://github.com/apache/cordova-plugin-splashscreen

4、移动端H5页面之iphone6的适配:http://ju.outofmemory.cn/entry/133368

------------ ---- --- - -- - - - -- -- - -- - - - - - --- - - - - -- - - - -- - - - - -- -

我们再来看一下SplashScreen插件原代码和最新代码的区别:

原CDVSplashScreen截图:

-------------- 原CDVSplashScreen.m --------------

------------------------   最新CDVSplashScreen截图  ------------------------

-------------- 新CDVSplashScreen.m --------------

看到这里似乎有点明白了,原cordova只做了对4和5的适配,新的插件才做了对6和Plus的适配,

原文链接:http://www.cnblogs.com/tandaxia/p/4982495.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

Chrome 插件收藏

Chrome 上有非常多的功能强大的和插件。这些插件让 Chrome 变得更加强大。下面是我常用的一些插件。

2381
来自专栏阮一峰的网络日志

文件上传的渐进式增强

文件上传是最古老的互联网操作之一。 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。 ? 网...

3646
来自专栏娱乐心理测试

xcode 9以后导入图片遇到显示不出的问题

1762
来自专栏一个会写诗的程序员的博客

功能强大的jQuery图片查看器插件

2421
来自专栏非著名程序员

简单高效的实现 Android App 全局字体替换

Android O推出了一项新的功能「Fonts in XML」,借助这项功能,我们能够像使用其他资源文件一样使用字体,比较方便地实现App全局字体的替换。 为...

3039
来自专栏Timhbw博客

Xcode神器-Alcatraz

2016-08-1300:07:53 发表评论 566℃热度 相关地址 安装方法 使用方法 我的插件 目录 Alcatraz,Xcode上的神器!一个...

2958
来自专栏Bug生活2048

微信小程序版博客——图片相关处理

前面提到,小程序服务端的数据是基于Ghost的公共API的,在设计首页文章列表时,为了美观加上了头图,但是服务端没有提供对应的字段(头图url)。

2672
来自专栏王磊的博客

ReactNative开发工具有这一篇足矣

ReactNative系列文章: 1.《逻辑性最强的React Native环境搭建与调试》 2.《ReactNative开发工具有这一篇足矣》 正文 Rea...

35913
来自专栏前端儿

微信小程序 - 入门指引

设置 -> 开发者设置 -> 服务器域名中   配置好服务器域名,小程序才能正确地发起异步请求

5221
来自专栏吴裕超

微信充值页面开发总结

前端获取code---把code给后端去获取openID---将openID和订单信息发给后端获取微信支付所需参数(订单号、appid、微信签名等信息)---调...

1701

扫码关注云+社区