How to make html & css the width of the device using PhoneGap

Question

I am just starting out with developing a mobile application using Html, Css, Js via PhoneGap, and my first goal is to ensure that all content fits perfectly with any given phone. Therefore, I want to ask you if my approach is correct and how to implement it.

My idea is to take Width and Heigh using JavaScript, I think there are some PhoneGap functions that return these values. Then I will use these values ​​to set the html Width and Heigh (I think I should do this using the onBodyLoad () function, correct me if not), so I set the html body to the device screen size, and then I put all other elements through% instead of pixels.

I also saw this line in a random search:

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

It seems like this should work too, but I'm not sure what it does and how it works. Su ... what do you think is the best way to do this? maybe there’s another one that I don’t know about?

Many thanks for the help!

Answer 1

Depending on the elements you use, etc. you have to leave by just setting the width as a percentage, you don't need any javascript or anything like that.

The viewport code block you posted is pretty standard Phonegap code that just makes it so that you can't hang on the page, etc.

Answer 2

Here is the free PhoneGap system. It has the body div # as the shell of your application, #body has the full width and height as the phone screen. everything is wrapped in #div.