How can I scale my Cordova/PhoneGap app? Should I use “cordova-anyscreen”, or is it too hacky?

Question

I'm having problems scaling my app on different devices that have the same proportions but with different -device-pixel-ratio factors.

Example: I have two 360x640 screens, and I make everything fit on one of them, but in the other the content is too big. It doesn't matter if I use em/rem units and change the font-size on html, or if I use media queries or px units. As long as the proportion is the same, they result is gonna be different.

My options are:

1. Use viewport units and drop support for older devices (or use Crosswalk and add 20mb to my 500kb app), or
2. Use cordova-anyscreen , which is the only thing I have found, but just seems wrong.

I might be missing something, but I have already spend two full days browsing Google and Stackoverflow, and I don't get how people do to make apps scale proportionally and density-independent. I really need help here. Thanks.

Answer 1

I do traditional way of work.

I use css to make it to suitable for other devices.

Just make sure to have,

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

and use % or em if possible for your css.

To define different screen sizes in css, use

@media (min-width:400px) and (max-width:434px){}
/* This is for iPhone 6+ */

Answer 2

I dont know if this will help you, but its help me.

I have the same problem to compile my code to android/ios devices becouse of scaling. The lower menu not show.

But i found Intel XDK where you can build app for many devices and OS Its use crosswalk/cordova etc. where there is automatic scale. Maybe this will help.

Try it out :)