Tabs not showing the same style in Desktop browser and Android

ionic-v1
1

I can’t figure out since when the tabs are not showing the same style when opening in desktop browser and in android app built through cordova.

I created a sample app with the exact codes in here(http://codepen.io/ionic/pen/odqCz)

This is what it looks like in desktop browser(chrome):

The same page opened in android device and in desktop chrome emulating mobile device:

Is this what ionic tabs supposed to work?

2

I found out that different user agent does influence the looks of ionic tabs, does anyone have a clue on this?

3

But the codepen example looks fine if you are emulating iPad in chrome.

4

i would say this is due to android themening
Normaly a app looks diffrent in Android then on ios.

If im right Ionic looks up user agent found that you are running Android and injects this css classes to body:
platform-android, platform-android4, platform-android4_0

on ios it injects this classes:
platform-ipad, platform-ios, platform-ios6, platform-ios6_0

classes are depending on each platform like ipad/iphone os etc.

atm i dont have a solution to force ionic to use ios style on all platforms.

5

yeah, but thats why the default ionic look is on android, iOS nearly the same.
Because you want to have same look and feel.

The classes are indicators for special fixes and behaviour.

6

Hey there! So the different look on ios and android is to help make the apps feel more at home to their native platform.

While you can theme your app to use certain colors and such, there are platform specific features that can reveal the app is not native. So we wanted to avoid that.

With many people not sure how to write their scss for this, I created this gist, which would be if you need to make a custom color for every component. Hope this helps!

1 Like
7

Thank you all for the explanations. It is really a thoughtful feature for different platforms.

8

Is this feature documented somewhere? Is there a list of visual differences for android/ios?

I implemented this myself when using beta8 - checked platform and according to the platform I put tabs on top (android) or at the bottom (ios). Is this still needed or it is now done automagically?

9

It’s not documented as of yet, but you can see the discussion on github.

Now ionic will handle the styling automatically