This post is also available in: English-US (英語)

Angular.js ベースのモバイルUIフレームワークの ionic を使っていてページデザインが上側にずれて崩れる場合の対処方法のメモです。

1.class="has-header" を追加する

ionicにはclass="has-header"という便利なクラスがあります。

<ion-content class="has-header">
...
</ion-content>

2.padding-top を追加する

padding-top のpxは任意で決めてください。

<ion-content style="padding-top:50px;">
...
</ion-content>

追記:3.has-header="true"を追加する

has-header="true" を追加する方法もあるようです。

<ion-content has-header="true">
...
</ion-content>