Css not working on Android native app


#1

Hi I fimally tweaked the css of my app to give my app the final touch. I tested all in chrome browser desktop. Now I build my app with cordova and wow. Disappointing. My app looks bad, seriously bad. Some tekst next to buttons are gone. buttons are not align. It looks like divs dont have the right size.
Then I tried my app in a Android browser. The standard Android browser shows the same. But on my Android device the app in cgrome browser looks like in my desktop chrome. Am I missing something here…


#2

The short answer: yes, you are missing something.

You are developing with an mobile-first framework, meaning, you should test on mobile. Of course, don’t test every five minutes, chrome is fine. Should test your app on mobile devices like every hour or at least every part of the day. If you are working 24 hours on it, morning, afternoon and evening tests are the very least you should do, to avoid such huge disappointments. (But i recommend more often, espescially when you’re not to familiar with mobile development.

That said, let’s dive deeper into the problem. Did you design in a small size in chrome? So, are you sure the repsonsive part works well? Which andorid version are you using? Everything below 4 has some serious issues with position:fixed elements, avoid position fixed and use absolute positioning instead. iOS even renders position:fixed very differently from what you’d expect in common circumstances.

When I know which device version you’re using and if could you give us some sample code we could see, I might be able to dive deeper and give you more specific information about what is going wrong and how you could prevent and fix it.

Ionic is awesome in my opinion, and it handles a lot of stuff pretty good. It cannot however make all mobile specific things go away, everything you write that is not in the framework (but code that uses the framework, custom styling etc) is completely up to you to make that part work on all mobile devices, and thus you should test that.

Hope my information so far helped, and I hope to be able to help you even more once you clarify things and give some sample code of what’s going wrong.


#3

Hi, thank you for this nice reply. About testing you said nothing new for me. I started to tweak some css-classes to let the app look better. The point here is: In all browsers desktop and mobile there is no problem, Alle layout look the same. Only in Android webview and some android browser there was a a problem. Was, because I figured out that removing ‘float: left’ in some css-classes brings back divs with text and images. There was still one difference: I use margin to to align pictos with text and images. Those margins are interpreted different in Android. Now Ive tweaked the margins to look nice in Android because next week I have to show my app for some people who use Android tablets.
Is there a way to have one css-rule for Android and one for other devices/browsers???

Thank you again


#4

Yes, when building for android ionic automatically adds “platform-android” as a body class. You should be able to bind custom css rules for that (because they are more specific, they will automatically override non-android css)

I’m not sure whether your solution will cover all situations though, I’ve never noticed different margins in android then for different browsers/webviews, it might just be a symptom of something else.


#5

Your answers is not very clear. I read before about the classes Ionic add to the app depending on user-agent. But I did not understand what this means to me. Maybe is this the cause of my problem and not the solution. It is not simple put some icon and some text, let’s say in the status bar of a view and Ionic classes let them look the same in IOS and Android. I think the classes Ionic add to the app are for some Ionic widgets look like there are Android widgets. I’m afraid I have to find other CSS solutions. I hope Ionic-team has some good hints about this.


#6

If you now have something like this:

.pictos {
    margin: 15px; //just for example purposes
}

You could transform it like this:

//All browsers
.pictos {
    margin: 15px; //just for example purposes
}

//Android browsers
.platform-android .pictos {
    margin: 20px; //just for example purposes
}

This class ‘platform-android’ that is added to the body element, renders you possible to have platform specific css markup.

Hope my answer is more clear now :slight_smile: