Click here to Skip to main content
13,139,569 members (50,317 online)
Rate this:
Please Sign up or sign in to 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.

Posted 9-Dec-12 17:46pm
Phat (Phillip) H. VU 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

Rate this: bad
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.

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.
function setSize()
var width=$window.width();
var height=$window.height();
<!-- on document.ready call the setSize() it will set the parent div size -->
<div id="parent"> 
<div style="position:absolute;height:9%;top:0px;">

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.

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)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web04 | 2.8.170915.1 | Last Updated 5 Jan 2013
Copyright © CodeProject, 1999-2017
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