Ion Tabs Rendering anders auf dem Desktop im Vergleich zu mobilen

Question

Ich habe vor kurzem meine ion-tabs gestylt.

Sie scheinen auf dem Desktop, aber nicht auf dem Handy korrekt zu rendern.

Was mache ich falsch?

Auf Desktop:

ion-tabs Ansichten richtig.

Auf Mobil:

ion-tabs geht weiß.

Was muss ich tun, damit beide gleich aussehen? Ich habe this betrachtet, und anscheinend muss ich ein kundenspezifisches Thema machen, aber fragte mich, ob es eine schnellere Annäherung gab.

Dies ist mein Code so weit:

html

<ion-tabs class="tabs-icon-top tabs-color-active-positive"> 

    <!-- Home Tab --> 
    <ion-tab icon-off="ion-android-home" icon-on="ion-android-home" ui-sref="tab.home"> 
    <ion-nav-view name="tab-home"></ion-nav-view> 
    </ion-tab> 

    <!-- Notifications Tab --> 
    <ion-tab icon-off="ion-android-notifications" icon-on="ion-android-notifications" ui-sref="tab.notifications"> 
    <ion-nav-view name="tab-notifications"></ion-nav-view> 
    </ion-tab> 

    <!-- Search Tab --> 
    <ion-tab icon-off="ion-android-search" icon-on="ion-android-search" ui-sref="tab.search"> 
    <ion-nav-view name="tab-search"></ion-nav-view> 
    </ion-tab> 

    <!-- Account Tab --> 
    <ion-tab icon-off="ion-android-person" icon-on="ion-android-person" ui-sref="tab.account"> 
    <ion-nav-view name="tab-account"></ion-nav-view> 
    </ion-tab> 

</ion-tabs> 

SCSS

// Tabs 

.tabs { 
    background-color: #242424; 
} 

ion-tabs.tabs-color-active-positive .tab-item { 
    color: #fff !important; 
} 

.tab-item .icon { 
    padding-top: 2px; 
    height: 48px; 
    font-size: 40px; 
} 

Answer 1

Ihre ionic.css-Datei, die die Klassendefinition für ionicons hat sich nicht immer in index.html als Teil des mobilen Build enthalten.

Stellen Sie sicher, dass:

1. die Datei index.html in platforms/www/<android/ios>/<path to index.html> Referenz enthält

2. Die Datei ionic.css ionic.css

   an der gewünschten Pfad kopiert

Sie Überprüfen Sie auch Ihre mobile Build in chrome://inspect für Android oder Safari für IOS Builds verwenden, um sicherzustellen, dass diese Datei AVA ist iable im mobilen Build Ihrer App