Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Android jQuery Phone HTML5/CSS , +
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 9-Dec-12 18:46pm
Comments
Avinash6474 at 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

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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>
 
<!-- 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
  Permalink  
Comments
SoMad at 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)

  Print Answers RSS
0 George Jonsson 215
1 Kornfeld Eliyahu Peter 169
2 OriginalGriff 120
3 PIEBALDconsult 110
4 BillWoodruff 85
0 OriginalGriff 6,165
1 DamithSL 4,658
2 Maciej Los 4,087
3 Kornfeld Eliyahu Peter 3,649
4 Sergey Alexandrovich Kryukov 3,294


Advertise | Privacy | Mobile
Web04 | 2.8.141220.1 | Last Updated 5 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100