隨著iOS 11以及iPhone X的發(fā)布，以前使用ionic1開發(fā)的APP也需要針對(duì)iOS 11和iPhone X做相應(yīng)的適配工作。
一、適配iOS 11
首先放上適配前和適配后的圖片，讓大家有一個(gè)直觀的對(duì)比。
看了圖片之后想必大家都看出來(lái)了，其實(shí)適配iOS 11最主要就是要解決導(dǎo)航欄往下移了20px的問題。
因?yàn)橛惺褂胕onic3來(lái)寫過demo，所以知道這個(gè)問題在ionic3上是被解決了。
一開始，以為是通過修改iOS原生代碼來(lái)實(shí)現(xiàn)的。再通過對(duì)比ionic1項(xiàng)目和ionic3項(xiàng)目的相關(guān)原生代碼，發(fā)現(xiàn)兩者的代碼幾乎一模一樣的，所以確認(rèn)并不是通過修改原生代碼來(lái)實(shí)現(xiàn)的。
然后，在網(wǎng)上搜索一通之后，發(fā)現(xiàn)有個(gè)插件cordova-plugin-ionic-webview可以解決狀態(tài)欄的問題。
于是，抱著試一試的心態(tài)安裝了該插件，發(fā)現(xiàn)確實(shí)可以解決狀態(tài)欄的這個(gè)問題。但是，同時(shí)也帶來(lái)了一個(gè)新的問題，APP無(wú)法訪問接口數(shù)據(jù)，就算配置了白名單也還是不行。當(dāng)然該插件的這個(gè)問題在ionic3上貌似是得到解決了的。
所以同樣，該方案也就宣告失敗了。
最后，就在幾乎要放棄的時(shí)候，胡亂搜索到了viewport的相關(guān)資料，于是才初見端倪。
關(guān)于viewport的相關(guān)說明這兒就不再贅述。
所以，最終的解決方案就在index.html中的viewport的配置上面。
這是未修改前的viewport的配置
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
這是修改后的viewport的配置，完美適配iOS 11，直接從ionic3項(xiàng)目里面的index.html中復(fù)制過來(lái)的。
<meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
二、適配iPhone X
按照慣例，首先還是先上圖。
從第一張圖片中可以看出在屏幕的上下兩端都出現(xiàn)了黑邊，這其實(shí)就是沒有適配iPhone X而出現(xiàn)的兼容模式。
第二張圖片就是適配好了的截圖，終于可以看到iPhone X漂亮的劉海了。
順帶吐槽一下iPhone X的劉海，借用別人的話來(lái)說就是“驚艷了用戶，苦逼了開發(fā)”！
解決辦法：
- 把原來(lái)resources文件夾里面的splash.png圖片替換為2372*2372的大小；
- 使用ionic cordova resources命令重新生成資源圖片，你會(huì)發(fā)現(xiàn)ios的資源文件里面多了一張Default@2xuniversalanyany.png圖片。
使用ionic cordova resources命令，順帶也把Xcode更新到v9之后需要再添加一張1024的APPIcon的問題解決了。 - 重新打包iOS即可完成iPhone X的適配。
