隨著iOS 11以及iPhone X的發(fā)布姓言，以前使用ionic1開發(fā)的APP也需要針對iOS 11和iPhone X做相應(yīng)的適配工作。
一、適配iOS 11
首先放上適配前和適配后的圖片蜂筹，讓大家有一個直觀的對比兵扬。
看了圖片之后想必大家都看出來了国瓮，其實適配iOS 11最主要就是要解決導(dǎo)航欄往下移了20px的問題孵睬。
因為有使用ionic3來寫過demo，所以知道這個問題在ionic3上是被解決了。
一開始拢肆，以為是通過修改iOS原生代碼來實現(xiàn)的刊橘。再通過對比ionic1項目和ionic3項目的相關(guān)原生代碼据途，發(fā)現(xiàn)兩者的代碼幾乎一模一樣的裆蒸，所以確認(rèn)并不是通過修改原生代碼來實現(xiàn)的。
然后俺榆，在網(wǎng)上搜索一通之后萍桌，發(fā)現(xiàn)有個插件cordova-plugin-ionic-webview可以解決狀態(tài)欄的問題。
于是，抱著試一試的心態(tài)安裝了該插件，發(fā)現(xiàn)確實可以解決狀態(tài)欄的這個問題胞谈。但是，同時也帶來了一個新的問題躺孝，APP無法訪問接口數(shù)據(jù)，就算配置了白名單也還是不行。當(dāng)然該插件的這個問題在ionic3上貌似是得到解決了的秀存。
所以同樣澳盐，該方案也就宣告失敗了掀淘。
最后，就在幾乎要放棄的時候匆浙，胡亂搜索到了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項目里面的index.html中復(fù)制過來的。
<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)了黑邊，這其實就是沒有適配iPhone X而出現(xiàn)的兼容模式咪惠。
第二張圖片就是適配好了的截圖炭臭，終于可以看到iPhone X漂亮的劉海了搅吁。
順帶吐槽一下iPhone X的劉海，借用別人的話來說就是“驚艷了用戶，苦逼了開發(fā)”！
解決辦法：
- 把原來resources文件夾里面的splash.png圖片替換為2372*2372的大小；
- 使用ionic cordova resources命令重新生成資源圖片，你會發(fā)現(xiàn)ios的資源文件里面多了一張Default@2xuniversalanyany.png圖片。
使用ionic cordova resources命令拴签，順帶也把Xcode更新到v9之后需要再添加一張1024的APPIcon的問題解決了上渴。 - 重新打包iOS即可完成iPhone X的適配。
