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

Source: Internet
Author: User

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:

2, Apache in Cordova official website about icons and splash screens Introduction:

3, Cordova updated SplashScreen plugin address: Https://

4. Iphone6 of the Mobile H5 page:

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

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:

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.