I’m writing this app via phonegap through eclipse on win7.
I’ve declared a viewport meta-tag as such:
<meta name="viewport" content="width=600" />
According to the docs, this should make the phone’s viewport 600 pixels across.
My layout is 600 pixels wide (go figure).
However when I load this project in a 2.1 (3 api) AVD WVGA800 (800×480) there is about 120 pixels off the screen to the right. Its like the viewport is set to “480” still even though I’m specifying 600.
No matter what I change this to, nothing changes.
Whats the problem here? Am I missing something obvious?
I actaully figured this out – Setting the viewport to a specific width is workable if you set a few other settings via the java onCreate function. The problem is, after I get that working, the viewport will zoom in when you pick an input, after the keyboard comes up and then there is no way to unzoom without giving the user zoom controls.
I was able to work around this by creating a jquery plugin .phoneGapScale() which when called on an element will resize all of its pixel based widths based on the viewport of the device. This is ofcourse after setting the viewport width to device-width.
The plugin I wrote is kind of crude and it somewhat clutters the DOM (which doesn’t matter to me in this case) because there is no way to check if a css value was actually set via jQuery because checking the css values will always return 0px even if nothing was specified in the css.
So every element I throw at the resizer function onDeviceReady, ends up with a style tag like this: style=”font-size: Xpx; margin-left: Xpx; margin-right: Xpx; etc etc etc
I’ll post the plugin after I clean it up and document the usage properly.
In any event, this method has my fixed width application working on every device in every possible screen ratio and dpi.
It even gracefully ports to the iphone.