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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章