ionic在U聊环境下，顶端留白或者header拉伸的问题

U聊，是银联内部通讯使用的一款工具，基本功能和微信差不多，在内部，有很多的需求，经常性这些需求都会以公众号的形式在U聊上展现，在开发u聊的过程中，经常会碰到一些问题，这些问题在微信上都能正确显示，U聊下却有问题，最常见的就是在使用Ionic框架所产生的问题了。

Ionic是一款优秀的基于Angular的移动端的框架，它有着丰富的组件和便捷了命令行以及详细的说明文档，更重要的是，它能够一件帮你把你的页面打包成应用。

在开发U聊应用的时候，最让我困惑的是，就是Ionic的ion-header组件顶部被拉升，本来ion-header中字体应该居中的，但是，顶部总是会多出大概高20px的和ion-header背景一样的颜色，把ion-header组件拿掉后，问题变了，没有高20px的和ion-header背景一样的颜色的东西了，却多了个高20px的白色的东西。

奇怪的是，将网页放到微信或者浏览器里面打开并没有任何问题，没有问题就是最大的问题了，因为在手机里按理说不应该相差这么大才是。

百思不得其解，咨询U聊团队，他们也说不出什么原因，最重要的是，我无法定位问题的产生原因。

这一块为什么会被拉伸呢？是什么导致拉伸的？为什么微信却是正常的呢？

我想了以下几个原因：

1. U聊本身是一个Web页面实现的应用(Ionic就能实现这个)，有可能自己的Css和Ionic的Css发生了冲突。
2. Ionic自己的Bug(毕竟坑还是很多的，不过，几乎不可能，因为微信下正常)

在这两个原因后，我灵光一闪，想到还有一种可能性：

3. Ionic判断错了环境，以为这是一个类似打包软件的环境，所以自动加上了一个类似状态栏的高度(安卓下显示正常)

第一个和第三个原因是有可能的，其中，3似乎就是原因，我几乎肯定了，因为那个高度几乎就是状态栏的高度，而这个高度只有IOS才有，而这个也几乎能够完美的解释为什么微信正常，U聊不正常。

可是，为什么呢，为什么会把环境判断错误呢？

肚子里没料，怎么想都不行的，就去google搜索类似的问题，终于找到了一个网站，点击这里查看，这个网站最下方的代码是这样的：

Paste_Image.png

看到这儿，便一目了然了，果然是环境的问题，Ionic会判断当前环境是不是Cordova环境，如果是，便自动加上这个20px的Padding。

联系了U聊团队的人，发现，他们的确是使用了Cordova环境，那么解决就很简单了，就是修改一下配置文件。

Ionic的全局配置

Ionic的全局配置，主要在引入Ionic的模块的时候进行一些配置，具体可以查看官网

里面列出了很多的可以配置的选项以及配置的方法，遗憾的是，文档好像没有及时更新，因为我发现好像没有statusbarPadding这个配置选项。不过，这个选项却是可以用的:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    IonicModule.forRoot(MyApp,{
      ...
      statusbarPadding: false
    }),
    ...
  ],
  bootstrap: [...],
  entryComponents: [
      ...
  ],
  providers: [
      ...
  ]
})