PhoneGap iOS for IPhone6 and plus flash screen adaptation--Xmtan

The story started, because the boss strongly asked the app to have the same toolbar in IPhone6 and 5, then the front-end sister with @media for IPhone6 and plus did a style adaptation. Then the problem came, unexpectedly wonderful discovery @media style only to IPhone4 and 5 played a role, and then in 6 and 6S style effect and 5 is the same, odd strange!

Then I went to find the reason, inadvertently to get the device screen width high when the discovery of this magical phenomenon:

CGRect screenbounds =*str = nsstringfromcgrect (screenbounds); NSLog (@ "%@", str);

/*
Iphone4s Print Results: {{0, 0}, {320, 480}}

IPhone5 and 5S, there are 6, 6Plus, 6S, 6S Plus printing results are the same,
is: {{0, 0}, {320, 568}}
*/

According to normal logic, 6 and 6S should be printed as:{{0, 0}, {375, 667}}, and then 6Plus and 6S plus prints as follows:{{0, 0}, {414, 736}}

Immediately feel that this should be caused @medie style to 6 and plus does not work for the reason!

Then also found that the app's launch image, also known as the "splash screen" (Splash), 6 and 6S, plus all share the iPhone5 of the boot image: [email protected]~iphone.png. Even if you add a picture in the app's Resource folder splash: [Email protected]~iphone.png and [email protected]~iphone.png, but when packaged on 6 and plus, the loaded boot image is still 568h , how is this going to happen?

　　Then began the various checks, the final problem solved, first put the solution to say, three conditions:

1, in the iOS app project file ***.info, plus the configuration for the boot image, configuration content:　

<key>UILaunchImages</key> <array> <dict> &LT;KEY&GT;UILAUNCHIMAGEMINIMUMOSVERSION&L T;/key> <string>8.0</string> <key>UILaunchImageName</key> <string>default</string> <key>UILaunchImageOrientation</key> <string>portrait</string> <key>UILaunchImageSize</key> <string>{ the,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>{ the,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>{ the,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>{ the,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,1024x768}</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,1024x768}</string> </dict> </array>

View Code

：

　　

2, the Resource folder splash in addition to the original boot image, and then added to the 6 and plus the adaptation of the start picture, naming and image width and configuration in the project configuration consistent:

　　6 and 6S: [Email protected]~iphone.png, 750 * 1334

6Plus and 6S Plus: [Email protected]~iphone.png, 828 * 1472

：

　　

After the first two conditions have been completed, then the @media style has worked, and the 6 and plus start-up pictures have worked, but for the 6 and plus start-up process, there are two boot images before and after:

First appeared 667h or 736h after the picture, and then obviously appeared the [email protected]~iphone.png (640 * 960) this boot image.

3, so in order to solve this problem, but also to update Cordova to provide the latest plugins: SplashScreen Plugin

：

Then the download of the latest CDVSplashScreen.h and *.M files to replace the project has the original file, and then it is done, @media style also works, the toolbar is the same on 5 and 6, 4, 5, 6 also loaded their own launch (splash screen) pictures!

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

Enquiry and reference information:

1. StackOverflow Previous 6 splash screen adaptation question and answer: http://stackoverflow.com/questions/26283372/phonegap-and-iphone-6-plus-splash-screen-issue

2, Apache in Cordova official website about icons and splash screens Introduction: http://cordova.apache.org/docs/en/latest/config_ref/images.html

3, Cordova updated SplashScreen plugin address: Https://github.com/apache/cordova-plugin-splashscreen

4. Iphone6 of the Mobile H5 page: http://ju.outofmemory.cn/entry/133368

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

Let's take a look at the difference between the SplashScreen plugin's original code and the latest code:

Original Cdvsplashscreen:

--------------Original CDVSPLASHSCREEN.M--------------

------------------------Latest Cdvsplashscreen------------------------

：

--------------New CDVSPLASHSCREEN.M--------------

See here seems a little understand, the original Cordova only to 4 and 5 of the adaptation, the new plug-in to do the 6 and plus the adaptation,

Original link: http://www.cnblogs.com/tandaxia/p/4982495.html

PhoneGap iOS for IPhone6 and plus flash screen adaptation--Xmtan