ionic-framework - ionic View 在浏览器和模拟器中是不同的

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 构建包大小。