Question

I am just getting started with designing a Mobile App with Html,Css,Js via PhoneGap and my first goal is to ensure that all the content fits perfectly on any given phone. So I wanna ask you guys if my approach is correct, and how should I implement it.

My idea is to take the device Width and Heigh via JavaScript, I think there are some PhoneGap functions that return these values. Then I’ll use this values to set the html Width and Heigh(I think I should do this via onBodyLoad() function, correct me if wrong), this way I set up the html body to the device screen size, and then I position all the other elements via % instead of pixels.

I also saw on on some random search, this line:

<meta name="viewport" id="viewport"
 content="width=device-width, height=device-height,
 initial-scale=1.0, maximum-scale=1.0,
 user-scalable=no;" />

This looks like should work too, but Im not really sure if it does,and how it works.
Soo…what do you guys think is the best approach to do this? maybe there is some other one Im not aware of?

Thanks a lot for helping!

Answer 1

Depending on the elements you are using etc. you should be able to get away with just setting widths to percentages, no need for any javascript or anything of the like.

The viewport code block you posted is pretty standard Phonegap code that just makes it so you can’t soom in on the page etc.