Phonegap Android pixel-ratio issue - Images, Page width not reliable

Question

When I created a PhoneGap application previously, the images rendering on the pages are not correctly displayed on high DPI devices. So I made the web page with fixed pixel ratio: 1 for all devices without considering device DPI. But this will reduce the clarity of images.

I planned to use fluidic styles for my new app and not use specific width and height in HTML. But when I specified height in px for a div (in CSS), the height renders differently in different devices.

Is there any way to make the ratio of HTML as well as CSS width and height same?

Is there any unknown property to tell HTML to behave in different Pixel ratio.

I am using the HTML tag:

<meta name="viewport" id="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />

I would like to render the page in device-dpi to avoid reduction in clarity. Kindly provide your ideas.

Answer 1

You should ideally avoid using pixels and use em's. For ex: Instead of 16px, use 1.1em or whatever is the equivalent for your situation. This worked for my phonegap jquerymobile applications