魚貓的個人博客上線啦！魚貓的個人博客?歡迎點擊查看喲！

前段時間，要更新公司的一個項目，用的是ionic1，結果在ios11上調(diào)試的時候，臥槽，什么鬼，導航欄全部跑到電池欄上面去，導致左上角的返回按鈕無法使用，而在iphone x上，tabs欄也出現(xiàn)欄問題（內(nèi)心一百句mmp）。怎么辦呢，找方案，做兼容唄。找了很多資料，試了很多方法，最后得出欄一個可行的辦法，下面提供給大家做做參考。

要解決這個問題，首先我們要知道什么是安全區(qū)域，安全區(qū)域是ios11新提出來的，幫助我們將view放置在整個屏幕的可視的部分，保證不被系統(tǒng)的狀態(tài)欄覆蓋（淺層理解）。詳細的介紹在這里iOS 11 安全區(qū)域適配總結，那么我們就可以根據(jù)這個安全區(qū)域來重新設置我們的view了。

第一步：將?viewport-fit=cover?添加到 meta viewport 標簽

注意：一定要記得添加這一步，不然沒有效果，這一步的作用是將頁面內(nèi)容充滿屏幕，viewport-fit的默認值是auto。

第二步，修改ion-nav-view的樣式

我的方法是給ion-nav-view新增一個樣式，我把它命名為global_ios，名字大家隨意

樣式的內(nèi)容如下

.global_ios {

????margin-bottom: constant(safe-area-inset-bottom);

????height: calc(100% - constant(safe-area-inset-bottom) - constant(safe-area-inset-top));

????margin-top: constant(safe-area-inset-top);

????background-color: transparent;

}

safe-area-inset-top?：視口頂部到安全區(qū)域的距離（以CSS像素為單位）。

safe-area-inset-right?：視口最右邊到安全區(qū)域的距離（以CSS像素為單位）。

safe-area-inset-left?：視口最左邊到安全區(qū)域的距離（以CSS像素為單位）。

safe-area-inset-bottom?：視口底部到安全區(qū)域的距離（以CSS像素為單位）。

constant() 是CSS的函數(shù)，可以把以上幾個距離轉(zhuǎn)換成我們常用的屬性值。

第三步，重新編譯打包，然后真機測試運行

這就是我解決ionic1在ios11上的適配問題，內(nèi)容比較簡單，也沒啥說明，有什么不懂的大家自行百度相關概念，因為我技術也是渣渣，哈哈哈，希望能幫到有需要的朋友。