U聊宋雏，是銀聯(lián)內(nèi)部通訊使用的一款工具，基本功能和微信差不多务豺，在內(nèi)部磨总，有很多的需求，經(jīng)常性這些需求都會(huì)以公眾號(hào)的形式在U聊上展現(xiàn)笼沥，在開發(fā)u聊的過程中蚪燕，經(jīng)常會(huì)碰到一些問題招狸，這些問題在微信上都能正確顯示数尿，U聊下卻有問題纸巷，最常見的就是在使用Ionic框架所產(chǎn)生的問題了畏腕。
Ionic是一款優(yōu)秀的基于Angular的移動(dòng)端的框架，它有著豐富的組件和便捷了命令行以及詳細(xì)的說明文檔厕诡，更重要的是，它能夠一件幫你把你的頁面打包成應(yīng)用营勤。
在開發(fā)U聊應(yīng)用的時(shí)候灵嫌，最讓我困惑的是，就是Ionic的ion-header組件頂部被拉升葛作，本來ion-header中字體應(yīng)該居中的寿羞，但是，頂部總是會(huì)多出大概高20px的和ion-header背景一樣的顏色赂蠢，把ion-header組件拿掉后绪穆，問題變了，沒有高20px的和ion-header背景一樣的顏色的東西了虱岂，卻多了個(gè)高20px的白色的東西玖院。
奇怪的是，將網(wǎng)頁放到微信或者瀏覽器里面打開并沒有任何問題第岖，沒有問題就是最大的問題了难菌，因?yàn)樵谑謾C(jī)里按理說不應(yīng)該相差這么大才是。
百思不得其解蔑滓，咨詢U聊團(tuán)隊(duì)郊酒，他們也說不出什么原因，最重要的是键袱，我無法定位問題的產(chǎn)生原因燎窘。
這一塊為什么會(huì)被拉伸呢？是什么導(dǎo)致拉伸的杠纵？為什么微信卻是正常的呢荠耽？
我想了以下幾個(gè)原因：
-
U聊本身是一個(gè)Web頁面實(shí)現(xiàn)的應(yīng)用(Ionic就能實(shí)現(xiàn)這個(gè))，有可能自己的Css和Ionic的Css發(fā)生了沖突比藻。 -
Ionic自己的Bug(畢竟坑還是很多的铝量，不過，幾乎不可能银亲，因?yàn)槲⑿畔抡?
在這兩個(gè)原因后慢叨，我靈光一閃，想到還有一種可能性：
3. Ionic判斷錯(cuò)了環(huán)境务蝠，以為這是一個(gè)類似打包軟件的環(huán)境拍谐，所以自動(dòng)加上了一個(gè)類似狀態(tài)欄的高度(安卓下顯示正常)
第一個(gè)和第三個(gè)原因是有可能的，其中，3似乎就是原因轩拨，我?guī)缀蹩隙思桑驗(yàn)槟莻€(gè)高度幾乎就是狀態(tài)欄的高度，而這個(gè)高度只有IOS才有亡蓉，而這個(gè)也幾乎能夠完美的解釋為什么微信正常晕翠，U聊不正常。
可是砍濒，為什么呢淋肾，為什么會(huì)把環(huán)境判斷錯(cuò)誤呢？
肚子里沒料爸邢，怎么想都不行的樊卓，就去google搜索類似的問題，終于找到了一個(gè)網(wǎng)站杠河，點(diǎn)擊這里查看碌尔，這個(gè)網(wǎng)站最下方的代碼是這樣的：
看到這兒，便一目了然了券敌，果然是環(huán)境的問題七扰，Ionic會(huì)判斷當(dāng)前環(huán)境是不是Cordova環(huán)境，如果是陪白，便自動(dòng)加上這個(gè)20px的Padding颈走。
聯(lián)系了U聊團(tuán)隊(duì)的人，發(fā)現(xiàn)咱士，他們的確是使用了Cordova環(huán)境立由，那么解決就很簡(jiǎn)單了，就是修改一下配置文件序厉。
Ionic的全局配置
Ionic的全局配置锐膜，主要在引入Ionic的模塊的時(shí)候進(jìn)行一些配置，具體可以查看官網(wǎng)
里面列出了很多的可以配置的選項(xiàng)以及配置的方法弛房，遺憾的是道盏，文檔好像沒有及時(shí)更新，因?yàn)槲野l(fā)現(xiàn)好像沒有statusbarPadding這個(gè)配置選項(xiàng)文捶。不過荷逞，這個(gè)選項(xiàng)卻是可以用的:
@NgModule({
declarations: [
...
],
imports: [
IonicModule.forRoot(MyApp,{
...
statusbarPadding: false
}),
...
],
bootstrap: [...],
entryComponents: [
...
],
providers: [
...
]
})
