Cordova/general: Easiest way to develop for different screen layouts?

Question

I was really wondering.. What is the easiest way, in combination with Phonegap/Cordova, to make your app support multiple screen resolutions? Mainly all Android ones, such as 480x800, 720x1280x 1280x720, 800x1200, etc.?

I've already created an app with percentages only (Click) (Which would show great on all 16:9 screens, but it doesn't), but that isn't enough. Only on screens with 720x1280 it shows ok.

Especially the option to deploy both for phone as tablet seems impossible due to the whole different orientation.. and the bigger screen leading to a whole new UI (for best user performance).

The only way I could think of is creating a different stylesheet for EVERY resolution, which could take up a huge amount of time; i guess?

Looking forward to feedback, thanks!

Answer 1

First, code responsive where ever possible. Instead of media queries (which are messed up on android 4), you could try https://github.com/biodiv/cordova-screengod

After deviceready, you call

screengod(['path/to/your.css'],function(){
    /* do your stuff */
});

and it automatically adapts your css to look the same across all platforms/screens.

Answer 2

Personally, I use Bootstrap and their Grid system. It takes a minute to figure out how it works and how to get it to fit with what you are trying to do but once you do, it is amazing. Documentation is here.