Ionic Ansichten unterscheiden sich in Browser und Simulator

Question

Ich entwarf eine App, aber es gibt einen Unterschied in der Platzierung des Suchfelds unterhalb der Unter-Header, wenn auf Browser und Emulator ausgeführt. Irgendeine Idee warum passiert das?

HTML-Vorlage

<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

Es sieht aus wie eine CSS Diskrepanz zwischen dem iOS Webansicht und Ihrem Browser.

Sie sollten keine benutzerdefinierten Eingabefeld für die Suche verwenden, es ist stark empfohlen, die bestehenden <ion-searchbar> Element zu verwenden.

Stellen Sie außerdem sicher, dass Sie keine sehr alte iOS-Version in Ihrem Emulator ausführen. Erwägen Sie die Bündelung von WKWebview in Ihrer App, falls Sie dies noch nicht getan haben. iOS-Anwendungen, insbesondere auf älteren Geräten, profitieren davon sehr, obwohl sie die cordova-Build-Bundle-Größe deutlich erhöhen.