In HTML page I am using jquery library to read the height and width of display area.
$window.width();
$window.height();
Then assign the height and width for the parent div tag on page. and take the child div's and assign only one parameter i.e. height or width in "num %" . It will maintain the aspect ratio and the page designs will be resolution free.
<script>
function setSize()
{
var width=$window.width();
var height=$window.height();
docoment.getElementById("parent").height=height;
}
</script>
<!--
<div id="parent">
<div style="position:absolute;height:9%;top:0px;">
</div>
</div>
You can open in any browser, the design will fit in the browser.
For image height and widths also specify only one parameter i.e. width or height in %. The image will automatically fit as per the browser size.
The same designs are working fine in Android and iPhone with Phone gap.
Thanks,
Avinash