最近剛剛升級了最新的xcode9.1,緊隨而來的就是對iPhone X的適配工作.由于我們項目并不是使用的ionic,而是cordova項目,所以需要自己對cordova項目進(jìn)行適配工作
準(zhǔn)備工作
1.創(chuàng)建一個新的cordova工程
cordova create myApp
2.創(chuàng)建成功后,直接添加ios平臺
cordova platform add ios
image.png
3.平臺添加成功后,直接打開xcode用iPhone X的模擬器運行該程序
運行后可以發(fā)現(xiàn),在應(yīng)用上下兩側(cè),出現(xiàn)了兩條黑色以及兩條灰色的邊框,所以我們再這里就要對應(yīng)用進(jìn)行調(diào)整,使它能夠適配屏幕
image.png
4.適配的過程其實也很簡單
1).增加資源文件,使應(yīng)用能夠適配整個屏幕,去掉兩條黑色邊框
打開config.xml ,增加節(jié)點
config.xml
即增加一個2732*2732的一張圖片(這里偷懶了,直接拿了個ionic工程的圖片..)
編譯工程
cordova build ios
在模擬器上重新運行項目,發(fā)現(xiàn)剛剛的兩條黑色邊框已經(jīng)不見了
image.png
2).接下來就是對網(wǎng)頁進(jìn)行適配,使網(wǎng)頁能夠適配應(yīng)用,去掉灰色邊框
這個就比較簡單了,打開首頁文件,在meta中增加viewport-fit=cover屬性
viewport
增加完成后,再次重新編譯,并在模擬器上運行,可以看到,最初的黑色邊框及灰色邊框就都不見了
image.png
這樣我們的屏幕適配工作就完成了,接下來的工作,就是根據(jù)應(yīng)用的頁面,調(diào)整對應(yīng)的css即可
