Ionic 2 rendered different UI in older smartphone (Galaxy note 2)

Ionic Framework ionic-v3
1

image
ionic2oldersmartphone.jpg720×1280 589 KB

Above UI rendered in Galaxy Note 2 smartphone. This app was created by Ionic 2 RC0. I circled the layout problem. It is currently two tiers display in Galaxy Note 2. Can I fix this issue or maybe smartphone is too old ? It work as expected in more recent smartphones.

Below is the header code:

  <ion-navbar color="primary">
    <button menuToggle ion-button>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Laman Utama</ion-title>
     <ion-buttons end>
      <button (click)="goToSearch()" icon-only ion-button>
        <ion-icon name="search"></ion-icon>
      </button>
      <button (click)="goToWishlist()" icon-only ion-button>
        <ion-icon name="md-heart" color="white"></ion-icon>
        <ion-badge item-right class="badge-md-custom" *ngIf="wishlistservice.wishlistTotalItem!=0">{{wishlistservice.wishlistTotalItem}}</ion-badge>
      </button>
      <button (click)="goToCart()" icon-only ion-button>
        <ion-icon name="cart" item-left></ion-icon>
        <ion-badge item-right class="badge-md-custom" *ngIf="cart.cartTotal!=0">{{cart.cartTotal}}</ion-badge>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

My system information:

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.4
OS: Mac OS X Yosemite
Node Version: v5.12.0
Xcode version: Xcode 6.4 Build version 6E35b