Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
Hi All,

I have an android application which I designed using a phone gap. I have html pages with graphics , images and many functinality.

I want to design a HTML pages in such a way that it will fit the designs in Android phones, Andoid TAb, iPhone , IPAD etc.

In application I have functinality to show images. Currently I am maintaining two individual copies of html files for Andoid and iPhone as per the resolution of phone screen.

How I can make the designs Resolution independent? so that same HTML designs applied for any phone(android and iPhone) with any resolution of screens.



Thanks for advice in advance.

Thanks,
Avinash
Posted
Comments
[no name] 3-Jan-13 11:13am    
Hi Avinash,
try google with this key words "html responsive design"
Avinash6474 5-Jan-13 3:01am    
Hi Phat,

Thanks for suggetion.
I maintained height and width in '%'. then It works for differnt devices perfectly.

1 solution

In HTML page I am using jquery library to read the height and width of display area.
JavaScript
$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.
HTML
<script>
function setSize()
{
var width=$window.width();
var height=$window.height();
docoment.getElementById("parent").height=height;
}
</script>

<!-- on document.ready call the setSize() it will set the parent div size -->

<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
 
Share this answer
 
Comments
SoMad 5-Jan-13 22:32pm    
This gets my vote. I don't normally vote on an answer provided by the OP, but this is different than most. Although the solution in the end looks quite simple, maybe even obvious, you clearly researched the problem and posted the answer to help out others with the same issue.

Soren Madsen

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900