html - Ionic header 和 subheader 在浏览器和模拟器中呈现不一样

Question

我的应用程序中有页眉和副标题。我创建了如下所示的 html:

<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>

当我在浏览器 (chrome) 中测试应用程序时，它看起来几乎和我想要的一样，但是当我使用 ios 模拟器时，标题和副标题看起来比它们应该的要大。

这是浏览器的截图:

这是从模拟器截取的截图:

这是我的这个页面的 scss 文件:

.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;
            }
        }
    }
}

这是我所有页面的 scss 文件:

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;
  }
}

更新代码

我已将类更改为不同的名称，希望覆盖默认的栏标题类。这是我的 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;
}

这是我的 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>

但它最终在 Tomislav 的建议下运作良好。我想知道的是，如果我现在要改变高度，我应该在 Tomislav 写的 css 中改变它，并且这个值只是用来覆盖而不是实际改变高度，或者我应该改变我的文章标题中的高度, 文章-副标题类？

Answer 1

Ionic uses platform detection to decide how tall the header should be. So, to override it, you need to use the entire correct CSS selector.

.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; }