魚貓的個(gè)人博客上線啦闽寡！魚貓的個(gè)人博客?歡迎點(diǎn)擊查看喲代兵！
前段時(shí)間纵穿，要更新公司的一個(gè)項(xiàng)目，用的是ionic1奢人，結(jié)果在ios11上調(diào)試的時(shí)候谓媒，臥槽，什么鬼何乎，導(dǎo)航欄全部跑到電池欄上面去句惯，導(dǎo)致左上角的返回按鈕無法使用，而在iphone x上支救，tabs欄也出現(xiàn)欄問題（內(nèi)心一百句mmp）抢野。怎么辦呢，找方案各墨，做兼容唄指孤。找了很多資料，試了很多方法贬堵，最后得出欄一個(gè)可行的辦法恃轩，下面提供給大家做做參考。
要解決這個(gè)問題黎做，首先我們要知道什么是安全區(qū)域叉跛，安全區(qū)域是ios11新提出來的，幫助我們將view放置在整個(gè)屏幕的可視的部分蒸殿，保證不被系統(tǒng)的狀態(tài)欄覆蓋（淺層理解）筷厘。詳細(xì)的介紹在這里iOS 11 安全區(qū)域適配總結(jié)，那么我們就可以根據(jù)這個(gè)安全區(qū)域來重新設(shè)置我們的view了宏所。
第一步：將?viewport-fit=cover?添加到 meta viewport 標(biāo)簽
注意：一定要記得添加這一步酥艳，不然沒有效果，這一步的作用是將頁面內(nèi)容充滿屏幕爬骤，viewport-fit的默認(rèn)值是auto充石。
第二步，修改ion-nav-view的樣式
我的方法是給ion-nav-view新增一個(gè)樣式盖腕，我把它命名為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ù)听隐，可以把以上幾個(gè)距離轉(zhuǎn)換成我們常用的屬性值。
第三步哄啄，重新編譯打包雅任，然后真機(jī)測試運(yùn)行
這就是我解決ionic1在ios11上的適配問題风范，內(nèi)容比較簡單，也沒啥說明沪么，有什么不懂的大家自行百度相關(guān)概念硼婿，因?yàn)槲壹夹g(shù)也是渣渣，哈哈哈禽车，希望能幫到有需要的朋友寇漫。
