PhoneGap and iPhone 6 Plus splash screen issue

问题:

Ok, so while updating my app for iOS 8 and the larger iPhones I noticed an issue that I can't figure out how to resolve.

In my PhoneGap app, I have added a new asset library in Xcode for the splash screens, I added two new images, one for the iPhone 6 portrait and one for the iPhone 6 Plus portrait.

They work and the app now doesn't scale as it did without these images.

The issue is, on the iPhone 6 Plus when the app loads, the splash screen initially appears fine, but within a second or two it changes size and is displaying off the screen, like the screen changes its size and now half of the logo is off the screen, has anyone else seen this and know how to fix it? The image is the correct size as dictated by Apple, so not sure why its changing size mid app load.

回答1:

I was experiencing the same issue, which I narrowed down to the splashscreen plugin (org.apache.cordova.splashscreen). Here are the steps needed for me to fix the issue on both iPhone 6 & iPhone 6+:

1. Update to the latest version of the splashscreen plugin (which has been patched on GitHub):
   • cordova plugin remove org.apache.cordova.splashscreen
   • cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git
2. Recreate the entire iOS platform through cordova:
   • cordova platform remove ios
   • cordova platform add ios
   • cordova build ios
3. Ensure your iPhone 6 & iPhone 6+ splashscreen images are named Default-667h@2x~iphone.png and Default-736h@3x~iphone.png, respectively. Then, in Xcode, drag both image files into Resources/splash under your project target in the Project Navigator (pane on the left-hand side of the screen, by default).

It appears that the splashscreen plugin creates a fake splashscreen that should ideally perfectly match the real iOS splashscreen, and when you call splashscreen.hide(), you're actually hiding the fake splashscreen. Just, in the case of iPhone 6/6+, the fake splashscreen is wrong with the version of the plugin you currently get with cordova plugin add org.apache.cordova.splashscreen, and you see the image change size and move off the screen once the real splashscreen is hidden.

回答2:

So, because of the complexity of the way our projects are setup, I was not able to remove and add ios/android. I did attempt to create a fresh Cordova 3.6 project and install the new splashscreen plugin but this also did not work as expected.

I was able to solve the issue, although maybe not the best solution, this is what I did.

Inside of the iOS project's CordovaLib/CDVAvailability.h file I added two lines:

#define CDV_IsIPhone6Plus() ([[UIScreen mainScreen] bounds].size.height == 736 && [[UIScreen mainScreen] bounds].size.width == 414)

#define CDV_IsIPhone6() ([[UIScreen mainScreen] bounds].size.height == 667 && [[UIScreen mainScreen] bounds].size.width == 375)

Then inside my CDVSplashScreen.m I added changed:

if (CDV_IsIPhone5()) {
    imageName = [imageName stringByAppendingString:@"-568h"];

}else if (CDV_IsIPad() && isOrientationLocked) {
    switch (orientation) {
        case UIInterfaceOrientationLandscapeLeft:
        case UIInterfaceOrientationLandscapeRight:
            imageName = [imageName stringByAppendingString:@"-Landscape"];
            break;

        case UIInterfaceOrientationPortrait:
        case UIInterfaceOrientationPortraitUpsideDown:
        default:
            imageName = [imageName stringByAppendingString:@"-Portrait"];
            break;
    }
}

To:

if (CDV_IsIPhone5()) {
    imageName = [imageName stringByAppendingString:@"-568h"];

}else if(CDV_IsIPhone6Plus()){
    imageName = [imageName stringByAppendingString:@"-568h"];

}else if(CDV_IsIPhone6()){
    imageName = [imageName stringByAppendingString:@"-568h"];

} else if (CDV_IsIPad() && isOrientationLocked) {
    switch (orientation) {
        case UIInterfaceOrientationLandscapeLeft:
        case UIInterfaceOrientationLandscapeRight:
            imageName = [imageName stringByAppendingString:@"-Landscape"];
            break;

        case UIInterfaceOrientationPortrait:
        case UIInterfaceOrientationPortraitUpsideDown:
        default:
            imageName = [imageName stringByAppendingString:@"-Portrait"];
            break;
    }
}

Not sure why the 568h image works correctly, but I tried specifying the 736 and 667 images, but that did not work. Simple adding those two pieces of code, now the splash screen works correctly on iPhone 6+ and 6.

Unfortunately this fix is a per project solution as it involves editing a Cordova source file.

回答3:

I just updated my splashscreen plugin version 0.3.3 to 0.3.4 and splashscreen started working correctly for iphone 6 and iphone 6+ .

回答4:

The fix for this bug is appending suffix with pixelratio at the end of splashscreen image name - for example 'Default-667h.png' must be 'Default-667h@2x~iphone.png'. For iPhone 6+ pixelratio is 3, so the image name must be changed from 'Default-736h.png' to 'Default-736h@3x~iphone.png'.

回答5:

None of the answers solved the problem for me - the splash still did not work correctly in iPhone 6 & 6s (while it worked well for all other iPhones). Specifically - updating the plugin, naming the images, checking Bundle Resources - non helped. Removing and adding the platform is something I always try to avoid, because it means hours of work connecting all the bits again - I tried it and even this did not help. Hopefully this post will save you all this time :-)

The only solution that worked for me was stop using asset catalog and define the splash in the APP-Info.plist file. Here are the instructions:

1. From my experience with Cordova: always backup your entire project folder. A simple copy/paste as a backup can save a lot of trouble. So start with a simple backup
2. In Xcode go to the target screen of your app, scroll down to the "App Icons and Launch Images" section. For the "Launch Images Source" click the field and change it from the launch image to "Don't use asset catalog"
3. Go to your app-Info.plist and add the following (this is the raw text. You can also use a text editor to add it):

<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>

4. Last step: make sure your iPhone images are named as the following names I used:

   Default-568h@2x~iphone.png
   Default@2x~iphone.png
   Default-667h@2x~iphone.png
   Default~iphone.png
   Default-736h@3x~iphone.png

Until Cordova fix it I hope this answer will save you a lot of time :-)

回答6:

there is another probability about this question.

sometimes it would not auto create png reference to project, so even you have png, the project doesn't know about it.

so, check your Build Phases > Copy Bundle Resources

make sure all png you have on this list, if you miss something there,

add them to 'Copy Bundle Resources in Build Phases', then run application again, you might see the difference.

回答7:

Make sure that you don't have something like below in your config.xml

<preference name="SplashScreen" value="screen"/>