Ios Status bar overlaps ionic header bar

Question

I'm working on a Ionic app and i'm stuck since 3 hours with this statusbar:

This is what i have in this view:

<header-bar title="'Öffnungszeiten'" type="bar-energized" left-buttons="leftButtons" align-title="center"></header-bar>
<view>
  <content class="has-header bgstart">
    <input type="text" ng-model="searchBox" class="search" placeholder="Suchen...">

    <div ng-repeat="item in posts | filter:searchBox" class="card">
      <h3 ss="w">{{item.storeName}}</h3>
      <p class="w">{{item.openingHours[0]}}<br>{{item.openingHours[1]}}
        <br>
        {{item.openingHours[2]}}<br>
        {{item.openingHours[3]}}
        <br>
        {{item.openingHours[4]}}<br>
        {{item.openingHours[5]}}<br>
        {{item.openingHours[6]}}<br></p>
      <p class="c">
        <a href="tel:{{item.phone}}">
          <i class="fa fa-phone fa-lg">
            {{item.phone}}</i>
        </a>
      </p>

      <p class="c">
        <a href="tel:{{item.phone}}">
          <i class="fa fa-map fa-lg">
            {{item.address}}</i>
        </a>
      </p>

    </content>
  </view>

Any help much appreciated!

Answer 1

确保您的应用程序的meta标签中包含viewport-fit = cover 。