Ionic header icons and title different locations on browser and on android

this is my codes:

index.html -->

<ion-nav-view></ion-nav-view>

now I have this template that other pages inherit from:

sidemenu.html -->

<!-- Center content -->
<ion-side-menu-content>

    <ion-nav-bar class="bar-bloompy">
        <ion-nav-buttons side="primary">
            <button class="button button-icon whiteMe" ng-click="slideLeftMenu()">
                <i class="icon ion-navicon"></i>
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-content scroll="false">

        <ion-nav-view name="sideMenuContentArea"></ion-nav-view>

    </ion-content>
</ion-side-menu-content>


<!-- Left menu -->
<ion-side-menu side="left" class="bloompy">
            ....... doesnt matter

so what happens is in the browser it looks good, the icon for opening the side menu is on the left and title in the middle,
but when I install it on my android the icon floats to the right, and the title floats to the left…

Observing the same thing as well. Title centered on Chrome on Desktop, but to the left on Android. Running on Nexus 5, Android 5.0.1. Observed even when starting a new project with everything up to date (CLI etc.)

Ionic is smart about the platform. In the browser Ionic render like an I
OS device. On an Android device icons, titles, transitions are different because that’s Android recommendation. Also some other components are rendered OS specific, like: popover IOS has rounded corners. In Android Square corners. In a tab pane on IOS the tabs selects are bottom screen. In Android on top and looks different.
Once write code run everywhere.
Since Ionic rel 14 there are more different per OS.