桌面與手機的離子選項卡渲染方式不同

我最近給我設計了ion-tabs。桌面與手機的離子選項卡渲染方式不同

他們似乎在桌面上正確渲染，但不是在移動設備上。

我在做什麼錯？

在桌面上：

ion-tabs的觀點正確。

在移動：

ion-tabs變白。

我需要做什麼才能讓兩個看起來一樣。我一直在尋找this，顯然我需要製作一個自定義主題，但想知道是否有更快的方法。

這是到目前爲止我的代碼：

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; 
}

來源

2016-05-08 methuselah

這對於ionicons類的定義都沒有得到你的ionic.css文件作爲移動版本的一部分包含在index.html中。

確保：

在platforms/www/<android/ios>/<path to index.html> index.html文件包含引用ionic.css
文件ionic.css是在需要的路徑複製

你也可以檢查您的移動版本在chrome://inspect爲android或使用safari爲ios版本確保此文件是ava在您的應用的移動版本中可用

來源

2016-05-08 06:25:37

桌面與手機的離子選項卡渲染方式不同

回答

相關問題