phonegap application - deal with different resolutions

Question

I'm developing Android app with Phonegap and have problem with different screens. I searched a lot and everyone recommends to use meta tag , so I have include it in my html:

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

when i'm testing it in emulator , it's exactly what I want , but when I tested it on Samsung galaxy S4 and Samsung galaxy s2 , it's very small. S4 is showing it much more smaller. One even cant read content ( I think it's because of xhdpi and hdpi). So can anyone advice me how to deal with it? Thank you very much!

Answer 1

The problem that you're having is because of the target-densitydpi=device-dpi. It's trying to utilize the high resolution your phone has. The default meta tag that PhoneGap starts out with has extra details that is causing this "problem".

Change your meta tag to:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />

and it should work fine.

Answer 2

You should using CSS to control the UI base on the screen size & orientation. ex:

@media only screen and (min-width:768px) and (max-width:959px)

Ref docs: CSS media queries