离子视图在浏览器和模拟器中是不同的

Question

我设计了一款应用，但在浏览器和模拟器上运行时，子标题下方搜索框的位置有所不同。知道为什么会这样吗？

HTML模板

<ion-header-bar style="color: black; border-bottom: 2px solid #ed1b24 "class="bar bar-light bar-subheader">
    <div class="title">
     Home
    </div>

     <div class="buttons">
      <button style="color: #ed1b24;" class="button button-icon icon ion-ios-shuffle-strong" ng-click="isClick=!isClick"></button>
     </div>

   </ion-header-bar>

   <div class="fixed-header my-video"  >
          <label class="item-input-wrapper search-box-label">
            <input type="text" placeholder="Search" ng-model="search">
          </label>
      </div>
<ion-content class="ion-content-below-my-video has-footer">.....

CSS

.fixed-header{
      margin-top: 88px;
  /* @in height,
   put your content below the header bar.
  */
}

.my-video
{
    width: 100%;
    position: absolute;
    background: #ed1b24;
    color: red;
    text-align: center;
    padding: 5px;
}

.ion-content-below-my-video{
      margin-top: 40px!important;
}

Answer 1

它看起来像是iOS webview和浏览器之间的CSS差异。

您不应该使用自定义输入字段进行搜索，建议强烈使用现有的<ion-searchbar>元素。

还要确保您没有在模拟器中运行非常旧的iOS版本。如果您还没有，请考虑将WKWebview捆绑到您的应用中。 iOS应用程序，尤其是旧设备上的应用程序受益匪浅，尽管它会显着增加您的cordova构建包大小。