ブラウザとシミュレータでのイオンの表示が異なります

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アプリケーション、特に古いデバイスでは、コードバスのビルドバンドルのサイズが大幅に増加しますが、これは大きな利点です。