Ionischer Header und Subheader werden im Browser und Simulator nicht gleich dargestellt

Question

Ich habe Header und Subheader in meiner App. Ich habe HTML erstellt, die wie folgt aussieht:

<ion-header-bar class="bar-dark"> 
    <a ui-sref="main.logout" class="button button-icon icon ion-navicon"> 
    </a> 
    <a class="button button-icon icon ion-ios-search"> 
    </a> 
    <a class="button button-icon icon ion-person"> 
    </a> 
    </ion-header-bar> 
    <ion-header-bar class="bar-subheader bar-dark"> 
    <a href="#">Populært 
    </a> 
    <a href="#">Siste 
    </a> 
    </ion-header-bar> 

Und wenn ich die App im Browser am Testen (Chrom) es sieht fast aus, wie ich es aussehen soll, aber wenn ich Emulator für ios, Kopf- und subheader erscheinen größer als sie sollten.

Dies ist der Screenshot-Browser:

Und dies ist der Screenshot vom Emulator genommen:

Dies ist meine SCSS Datei für diese Seite:

.bar.bar-dark{ 
    display: inline-block; 
    height: 45px; 
    padding-top:0; 
    background-color: $dark-background-color; 
    color:$light; 
    border-color: $dark-background-color; 
    background-image: none; 

    .row{ 
     padding-top:0; 

     .icon{ 
      font-size: 2rem; 
     } 
     .ion-navicon{ 
      font-size: 3rem; 
     } 
     .right{ 
      padding-top:16px; 
     } 
    } 

    a{ 
     color:$light; 
     text-decoration: none; 

     &:active{ 
      color:$gray; 
     } 
    } 
} 

.bar-subheader { 
    top: 45px; 
} 

.has-subheader { 
    top: 90px; 
} 

.item-light { 
    .article{ 
     img{ 
      width: 100%; 
     } 

     h1 { 
      color: $light; 
      position: absolute; 
      bottom: 5rem; 
      text-align: center; 
      width: 100%; 
      margin: 0 auto; 
      font-size: 2rem; 
      padding: 0 10%; 
     } 
    } 
    .row{ 
     padding:.7rem; 

     a{ 
      font-size: 1.1rem; 

      i { 
       vertical-align: middle; 
       font-size: 2.1rem; 
      } 
     } 
    } 
} 

Und das ist meine SCSS Datei für alle Seiten:

body{ 
    background-color: $dark-background-color; 
} 

.item { 
    border: 0; 
} 

.item-content { 
    padding:0!important; 
} 

.right{ 
    text-align: right; 
} 

//Buttons 
.button{ 
    min-height: 60px; 

     &:active, &:hover{ 
      border-color:transparent; 
     } 
} 

//Customizing Ionic Icons 
.icon{ 
    color:white; 
    vertical-align: middle; 
} 

.ion-ios-heart-outline, .ion-ios-heart { 
    font-size: 1.7rem; 
    color: $red; 
} 

.ion-ios-chatbubble, .ion-chevron-right { 
    font-size: 1.7rem; 
    color: $gray; 
} 

.ion-chevron-left { 
    font-size: 2rem; 
    color: $light; 
    margin: 10px; 
    position:absolute; 
    top:15px; 
    z-index:1; 
} 

.ion-social-facebook { 
    font-size: 1.7rem; 
    color: $gray; 
} 

.popup-head { 
    background-color : $dark-background-color; 
    border: 0; 

    .popup-title { 
    font-size: 16px; 
    } 
} 

Aktualisiert Code

ich die Klassen zu verschiedenen Namen in der Hoffnung, sich geändert haben die Standard-Bar-Header-Klasse außer Kraft zu setzen. Das ist mein CSS:

.articles-header { 
    display: inline-block; 
    padding-top:0; 
    height: 45px; 
    background-color: $dark-background-color; 
    color:$light; 
    border-color: $dark-background-color; 
    background-image: none; 

    a{ 
     color:$light; 
     text-decoration: none; 
     font-size: 3rem; 

     &:active{ 
      color:$gray; 
     } 
    } 

    .right-icons { 
     float: right; 
    } 
} 

.articles-subheader { 
    top: 45px; 

    a { 
     font-size: 1rem; 
    } 

    .button:hover { 
     color:$light; 
    } 
} 

.has-subheader { 
    top: 90px; 
} 

Und das ist mein html:

<div class="row articles-header"> 
    <a ui-sref="main.logout" class="button button-icon icon ion-navicon-round"> 
    </a> 
    <div class="right-icons"> 
     <a class="button button-icon icon ion-ios-search-strong"> 
     </a> 
     <a class="button button-icon icon ion-person"> 
     </a> 
    </div> 
    </div> 
    <div class="row articles-subheader articles-header"> 
    <a class="button button-icon" href="#" ng-click="ShowHideBulletpoint('siste')"><i class="ion-ios-circle-filled" ng-show="bulletpointSiste"></i> Siste 
    </a> 
    <a class="button button-icon" href="#" ng-click="ShowHideBulletpoint()"><i class="ion-ios-circle-filled" ng-show="bulletpointPopular"></i> Populært 
    </a> 
    </div> 

Aber es funktionierte schließlich auch mit Vorschlag von Tomislav. Was ich wissen will ist, wenn ich die Höhe jetzt ändern sollte, sollte ich es in der CSS ändern Tomislav schrieb, und diese Werte werden nur verwendet, um zu überschreiben, aber nicht wirklich die Höhe ändern oder sollte ich die Höhe in meinem Artikel-Header ändern , Artikel-Subheader-Klassen?

Answer 1

lösen kann

Ionic verwendet Plattform Erkennung, um zu entscheiden, wie groß der Kopf sein sollte. Um es zu überschreiben, müssen Sie also den gesamten richtigen CSS-Selektor verwenden.

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) { 
    height: 64px; } 
    .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper { 
    margin-top: 19px !important; } 
    .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * { 
    margin-top: 20px; } 
.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top { 
    top: 64px; } 
.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader { 
    top: 64px; } 
.platform-ios.platform-cordova:not(.fullscreen) .has-subheader { 
    top: 108px; } 
.platform-ios.platform-cordova:not(.fullscreen) .has-tabs-top { 
    top: 113px; } 
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top { 
    top: 157px; } 
.platform-ios.platform-cordova.status-bar-hide { 
    margin-bottom: 20px; } 

Answer 2

in Ihrem ion-contentclass = "has-subheader" hinzufügen Ich hoffe, das Ihr Problem