部署到iOS时，Ionic CSS样式关闭，但在其他任何地方都很好

Question

因此，当我在Android手机和浏览器中查看我的应用程序时，标题（和子标题）如下所示

当我在iOS模拟器上运行或部署到iOS手机时，它看起来如下所示：

标记如下所示

        <ion-header-bar class="bar item-input-inset search">
                <div class="buttons buttons-left header-item">
                    <span class="left-buttons">
                  <button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
                  </button>
                </span>
                </div>
                    <label class="item-input-wrapper search">
                        <input placeholder="Search..." ng-model="model.searchTerm" ng-change="updateSearchTerm(model.searchTerm,model.quickSearchType)" type="text">
                    </label>
                    <button class="button button-clear" ng-click="clearSearch()">
                    <i class="icon" ng-class="{'ion-close':model.searchTerm.length > 0}"></i>
                  </button>
         </ion-header-bar>
         <ion-header-bar class="bar bar-sub-header item-input-inset action-sub-header">
             <button ng-style="model.quickSearchType == 'featured' && {'font-weight': 'bold'}"
                             style="color:#fff;"
                             class="button button-clear col col-33"
                             ng-click="quickSearch('featured',model.searchTerm)">
                 FEATURED
             </button>
             <button class="button button-clear col col-33"
                             ng-style="model.quickSearchType == 'nearby' && {'font-weight': 'bold'}"
                             style="color:#fff;"
                             ng-click="quickSearch('nearby',model.searchTerm)">
                 NEARBY
             </button>
                 <button class="button button-clear col col-33"
                             style="color:#fff;"
                             ng-style="model.quickSearchType == 'recent' && {'font-weight': 'bold'}"
                             ng-click="quickSearch('recent',model.searchTerm)">
                     RECENT
                 </button>
         </ion-header-bar>

我拥有的CSS如下：

.action-sub-header {
   background-color: #007fff;
}

.item-input-inset {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        padding: 10.66667px;
    }


    .bar-header {
        top: 0;
        border-top-width: 0;
        border-bottom-width: 1px;
    }

    .bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    right: 0;
    left: 0;
    z-index: 9;
    box-sizing: border-box;
    padding: 5px;
    width: 100%;
    height: 44px;
    border-width: 0;
    border-style: solid;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #ddd;
    background-color: white;
    /* border-width: 1px will actually create 2 device pixels on retina; */
    background-size: 0;
}

Answer 1

The ion-header-bar has a specific css on ios to add space on top of it for the iOS statusbar. You have to override it in your case.

To test the ios specific css in your browser, edit the classes on the body tag. Replace platform-browser by platform-ios and platform-macintel or platform-windows by paltform-cordova.

When you have do that, you'll be able to see the specific style applied by the ionic css:

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
    margin-top: 20px;
}

You just need to override it.

Answer 2

您需要将ionic.Platform.fullScreen();添加到$ionicPlatform.ready功能。