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

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

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

  /*
    iPhone4S打印结果: {{0, 0}, {320, 480}}

    iPhone5和5S、还有6、6Plus、6S、6S Plus打印结果都是一样的,
    为:{{0, 0}, {320, 568}}
  */ 

  按正常逻辑来说,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>{, }</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>{, }</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>{, }</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>{, }</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>{, }</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>{, }</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>{, }</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>{, }</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>{, }</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>{, }</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  

Phonegap之ios对iPhone6和Plus的闪屏适配 -- xmTan的更多相关文章

  1. IOS客户端UIwebview下web页面闪屏问题

    基于ios客户端uiwebview下的web页面,在其内容高度大于视窗高度时,如果点击超过视窗下文档的底部按钮,收缩内容高度,会发生闪屏问题. 外因是由文档的高度大于视窗的高度所致,本质原因未知. 解 ...

  2. 设置 phoneGap/Cordova 3.4 应用程序启动动画闪屏 SplashScreen

    当Cordova 程序打包并安装到手机中后,我们会发现启动程序时,会有数秒的黑屏现象,常见的解决方法则是设置闪屏后面. 这里以 Android 程序为例,介绍Cordova设置启动画面的方法. 1. ...

  3. 在 Visual Studio中 使用Apache Cordova 开发安卓、iOS程序(自定义图标和闪屏)

    方法1 1台安装有linux的电脑,虚拟机也行,并安装imagemagick软件包.我用的是linux mint,直接在软件管理器中安装即可 把https://github.com/shamork/c ...

  4. PhoneGap在iOS开发下的注意事项

    敏捷个人应用主要是在Andorid下开发,发布的也主要是Andorid.之所以没有急着退出iOS版本,主要是因为开发iOS需要iOS的开发环境,发布还需要开发者账号,这些都需要资源或钱.而最近越来越多 ...

  5. Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)

    Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. ...

  6. 配置PhoneGap 到iOS

    下载 phonegap安装phonegap之前需要NodeJS环境,下载NodeJS并安装.安装环境的目的是为了使用phonegap命令行. 3. 安装phonegap使用命令    $phonega ...

  7. ios 点击失效、闪屏问题解决方案

    一.点击失效 描述:将点击事件(click)委派在document或者body上,且目标元素为默认不可点击的元素时(非<a>. <button>而是<span>等) ...

  8. iOS 横竖屏适配

    关于横竖屏适配 也没做过,今天读别人的源码,遇到了.为了了解清楚,就系统的学习一下. 一 横竖屏方向枚举 关于横竖屏一共有三种枚举 UIInterfaceOrientation UIInterface ...

  9. phonegap创建的ios项目推送消息出现闪退现象

    使用phonegap创建的ios项目,推送消息时,当程序在前台运行或者在后台运行状态下,推送消息过来,可以解析并且跳转: 但是在程序从后台退出的状态下,当消息推送过来的时候,点击通知栏,打开程序,程序 ...

随机推荐

  1. BP算法笔记

  2. 在SQL Server里禁用聚集索引——真的好么?

    有人问了我一个最有意思的问题:“你能禁用聚集索引么?” 对这个问题,我先是吓了一跳,因为我从未想过禁用聚集索引,因为聚集索引代表表数据,对这个最有趣问题,我立即答道:“我认为可以,但是...” 好吧, ...

  3. JS魔法堂:再次认识Function.prototype.call

    一.前言                                大家先预计一下以下四个函数调用的结果吧! var test = function(){ console.log('hello w ...

  4. Sandcastle帮助文档生成器使用介绍

    一.软件介绍       Sandcastle是一个管理类库的文档编译器,是用于编译发布组件(Assembly)信息的一个工具,这个工具通过反射和Xslt技术,可以从dll文件及其xml注释(命令行编 ...

  5. 在_Layout模版中使用@Styles.Render()没有效果

    刚才有测试一个功能,就是在_Layout母版中使用了@Styles.Render()时行Render样式文件,所有在此母版下的视图均没有应用到样式,没有效果.是什么原因? 经查证资料,原来Insus. ...

  6. sQLserver T-SQL 事务的用法

    原文在: https://www.lesg.cn/netdaima/2016-55.html 在使用Mssql的时候经常需要用到存储过程 有些操作在前面发生错误的时候:需要回滚:这就需要事务了: 下面 ...

  7. iOS版本比较方法

    之前一直把版本号转换为floatValue,但是最近在项目中又出现了float的问题,主要是 NSString表示为@"17.30",转换为floatValue 值为17.2999 ...

  8. DevExpress winform XtraEditor常用控件

    最近在公司里面开始使用DevExpress winform的第三方控件进行开发和维护,这里整理一些常用控件的资料以便于后续查看 ComboBoxEdit 这个控件和winform自带的控件差不多,使用 ...

  9. all requires API level 3 (current min is 1)问题的解决

    几次出现了all requires API level 3 (current min is 1)的错误,后来发现解决的方法是右键单击项目文件夹,选择Android Tools->Clear Li ...

  10. line-height 属性

    p.small {line-height:90%} p.big {line-height:200%}     该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最 ...