解决ionic1在ios11上的导航栏不兼容问题

鱼猫的个人博客上线啦！鱼猫的个人博客 欢迎点击查看哟！

---

前段时间，要更新公司的一个项目，用的是ionic1，结果在ios11上调试的时候，卧槽，什么鬼，导航栏全部跑到电池栏上面去，导致左上角的返回按钮无法使用，而在iphone x上，tabs栏也出现栏问题（内心一百句mmp）。怎么办呢，找方案，做兼容呗。找了很多资料，试了很多方法，最后得出栏一个可行的办法，下面提供给大家做做参考。

要解决这个问题，首先我们要知道什么是安全区域，安全区域是ios11新提出来的，帮助我们将view放置在整个屏幕的可视的部分，保证不被系统的状态栏覆盖（浅层理解）。详细的介绍在这里iOS 11 安全区域适配总结，那么我们就可以根据这个安全区域来重新设置我们的view了。

第一步：将 viewport-fit=cover 添加到 meta viewport 标签

注意：一定要记得添加这一步，不然没有效果，这一步的作用是将页面内容充满屏幕，viewport-fit的默认值是auto。

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

我的方法是给ion-nav-view新增一个样式，我把它命名为global_ios，名字大家随意

样式的内容如下

.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 ：视口顶部到安全区域的距离（以CSS像素为单位）。

safe-area-inset-right ：视口最右边到安全区域的距离（以CSS像素为单位）。

safe-area-inset-left ：视口最左边到安全区域的距离（以CSS像素为单位）。

safe-area-inset-bottom ：视口底部到安全区域的距离（以CSS像素为单位）。

constant() 是CSS的函数，可以把以上几个距离转换成我们常用的属性值。

第三步，重新编译打包，然后真机测试运行

这就是我解决ionic1在ios11上的适配问题，内容比较简单，也没啥说明，有什么不懂的大家自行百度相关概念，因为我技术也是渣渣，哈哈哈，希望能帮到有需要的朋友。