故事的發生起於,由於老闆強烈要求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的適配,