I have designed my phonegap android application using html and
css.
So i want to know how to get
the same design size in all the mobiles.Is there any settings
available.Please tell me the solution.
Thanks in Advance.
update
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
<script src="my.js">
</script>
</head>
<style>
#searchwrapper {
width:90%;
height:48px;
background-image:url(../images/input-box.png);
background-repeat:no-repeat;
background-size: 100% 100%;
margin-left:15px;
position:relative;
}
.searchbox {
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:9px;
width:86%;
height:34px;
}
.searchbox_submit {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:90%;
width:9%;
height:40px;
}
#searchwrapperIC {
width:90%;
height:48px;
background-image:url(../images/input-box.png);
background-repeat:no-repeat;
background-size: 100% 100%;
margin-left:15px;
position:relative;
}
.searchboxIC {
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:9px;
width:86%;
height:34px;
}
.searchbox_submitIC {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:90%;
width:9%;
height:40px;
}
body {
font-family:Arial,Geneva,Verdana,sans-serif;
font-size: 0.8em;
overflow-x: hidden;
}
#loadingScreen {
background: url(../images/ajax-loader.gif) no-repeat 5px 8px;
padding-left: 25px;
}
/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
.checkBox
{
background-position: 0px 0px;
}
.checkBoxClear
{
background-position: -32px 0px;
}
.checkBox, .checkBoxClear
{
background-image: url('../images/CheckBox2.png');
background-repeat: no-repeat;
display: inline-block;
float: left;
width: 32px;
height: 32px;
padding: 0px;
margin: 0px;
cursor: hand;
}
</style>
<body>
<!-- Home -->
<div data-role="page" id="page1" style="background-color:white">
<div data-theme="a" data-role="header">
<img src="images/header-search-causes.png" alt="image" style="width:100%" />
</div>
<div data-role="content" style="padding: 16px">
<br>
<label style="font-size:12pt" align="center">Choose one of the following options to search our directory of causes</label></td>
<br/>
<div id="searchwrapper" style="width:90%;"align="center">
<input type="text" class="searchbox" name="s" value="" placeholder="Search" />
<img src="images/search-button.png" alt="image" class="searchbox_submitIC" />
</div>
<br/>
<li style="list-style:none" data-theme="b">
Button<br/>
Button<br/>
Button<br/>
Button<br/>
</li>
</div>
<div style="margin-top:4%;border-width:3px;padding-top:2%;background-color:#00458D;" align="center" data-theme="#00458D" data-role="footer" data-position="fixed">
<table width=100%>
<tr><td></td></tr>
<tr>
<img src="images/Home.PNG" alt="image" style="width:20%;height:6%;" />
<img src="images/messages-menu.jpg" alt="image" style="width:20%;height:6%;" />
<img src="images/settings-menu.jpg" alt="image" style="width:20%;height:6%;" />
<img src="images/close-menu.png" alt="image" style="width:20%;height:6%;" />
</tr>
</table>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
</html>
If you are doing Without JQuery mobile you have to do the dynamic layout sizes to the content like
You have to use percentage for height and width
Make the style to html body position relative
And give style position absolute to the inner body element
Note: Designing Layout using jquery mobile framework is very easy to make a good and rich layout. And you dont need to bother about the Various mobile sizes. It can manage automatically.
Related
So I'm doing a website with a "Modal Popup" login form responsive to mobile first and I have a footer to the end of the modal container. The problem is when I want to write something in both inputs, the keyboard appears and it push the footer up. I want the footer to stay in the position and the keyboard just don't resize my modal container or have interaction with the website.
This is how it look without showing the keyboard
And this is when it push the footer up.
Here's the code.
* {
margin:0;
padding:0;
}
header{
background-color:red;
width:100%;
height:30px;
display:flex;
justify-content: center;
align-items: center;
}
.to-modal-container{
background-color:blue;
width:100%;
height:200px;
display:flex;
justify-content: center;
align-items: center;
}
.to-modal{
background:red;
}
.bg-modal{
width: 100%;
height:100%;
background-color:rgba(0, 0, 0, .5);
position:absolute;
top: 0;
display:flex;
justify-content: center;
align-items: center;
}
.modal-content{
width:90%;
height:50%;
background-color: white;
border-radius: 4px;
text-align: center;
padding-top: 20px;
display:flex;
flex-direction: column;
justify-content:space-between;
}
input {
width:50%;
display: block;
margin:15px auto;
}
<!DOCTYPE html>
<html>
<head>
<title>MODAL TESTING</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<header>
<div>
<span>LOGO</span>
</div>
</header>
<div class="to-modal-container">
<div class="to-modal">
<span>CLICK AQUI</span>
</div>
</div>
<div class="bg-modal">
<div class="modal-content">
<span>LOGO</span>
<div class="form-container">
<form action="">
<input type="text" placeholder="Name">
<input type="Password" placeholder="Password">
Submit
</form>
</div>
<div class="footer-container">
<span>THIS IS THE FOOTER</span>
</div>
</div>
</div>
</body>
</html>
I played around with the code you have shared and noticed that you have set the Height of modal-content to 90%.
So it re-adjusts the height of your Modal to 90% of the screen height available which changes when the keyboard is open.
So my recommendation is to set a fixed height like 300px instead of % and have a different height for mobile devices using media-queries.
.modal-content{
width:90%;
/* height:50%; */
height: 300px;
background-color: white;
border-radius: 4px;
text-align: center;
padding-top: 20px;
display:flex;
flex-direction: column;
justify-content:space-between;
}
Let me know if you need any more clarification.
I am finishing up a website which can be found here - www.minimindsacademy.com
I need to find a way for the height to take up 100% of the screen on an iPhone device. It is not taking up 100% height on my iPhone but on my desktop browser it is even if I shrink it. The goal of this site was for it to be 100% responsive with the use of Twitter Bootstrap as my style framework. I am not sure if it is doing this on other mobile devices. Also, I cannot replicate this on my browser screen (when I make the browser screen small as possible it looks fine, however on my iPhone the height isn't 100%).I don't know if I did something wrong with the CSS or what.
It won't let me post images on my posts yet, but if you view the site on a mobile device you should see an example of what I am referring to on the Home page.
HTML:
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="script.js"></script>
</head>
<section class="hero">
<!--Nav Bar-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/logo.png" alt="">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Welcome</li>
<li>About Us</li>
<li>Staff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4">
<a href="home.html" >
<img id="logo" src="assets/logo.png" alt="logo">
</a></div>
<div class="span4"></div>
</div>
</div>
<!--BOX START-->
<div class="container" id="box">
<!--HEADER-->
<!--<h1>Home</h1>-->
<!-- CARASOUL -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/home/1.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Jammin Out</h3>
<p>Piano at the mall!</p>
</div>
</div>
<div class="item">
<img src="assets/home/2.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Snack Time</h3>
<p>Healthy eating for everyone!</p>
</div>
</div>
<div class="item">
<img src="assets/home/3.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Comfortable Environment</h3>
<p>Hangin with my pal!</p>
</div>
</div>
<div class="item">
<img src="assets/home/4.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Arts and Crafts</h3>
<p>Chalk is always fun!</p>
</div>
</div>
<div class="item">
<img src="assets/home/5.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Backyard Activities</h3>
<p>Beep Beep!</p>
</div>
</div>
<div class="item">
<img src="assets/home/6.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Outdoor Fun</h3>
<p>Hangin at the park!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- MAIN -->
<div class="row">
<div class="col-md-4" id="one">
<h3>About us</h3>
<p>Mini Minds Academy is here to provide a nurturing,
safe and stimulating environment for children to explore, learn and play! We
respect and value the diversity in each child's character, background and
level of development.</p>
<a class="btn btn-primary pull-right"
href="about.html">Read more</a>
</div>
<div class="col-md-4" id="two">
<h3>Meet our staff</h3>
<p>Our staff at Mini Minds academy consist of teachers
Shelly Lenzotti, an alumni of Boise State University. She has over 13 years
of experience in educating and caing for children ages 3 months - 11 years
of age.</p>
<a class="btn btn-primary pull-right"
href="staff.html">Meet us</a>
</div>
<div class="col-md-4" id="three">
<h3>Contact us</h3>
<p>If you are interested in our program and have a child
between te ages of 1-6 years old feel free to contact us. We would be happy
to provide for your child's needs if we have space available!</p>
<a class="btn btn-primary pull-right"
href="contact.html">Contact us</a>
</div>
</div>
</div>
</section>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</html>
CSS:
.navbar-brand {
padding: 5px 15px;
}
.navbar-brand img {
height: 40px;
}
#headerTitle {
position: relative;
max-width: 75%;
margin: 0 auto;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
#myCarousel {
margin-bottom: 20px;
}
section.hero {
background-image: url("../assets/1.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
}
#logo {
max-width: 400px;
margin: auto auto;
text-align: center;
margin-bottom: 30px;
width:100%;
}
.row .span4 {
text-align: center;
}
#box {
max-width: 75%;
padding: 20px;
padding-bottom: 100px;
}
.row {
padding: 0px 20px 0 20px;
}
.col-md-8 {
font-weight: bold;
color: #717070;
padding-bottom:20px;
}
.col-md-4 {
font-weight: bold;
color: white;
padding-bottom:20px;
}
#about h5 {
font-weight: bold;
}
#about2 {
background-color: #945389;
font-weight: bold;
height: 100%;
}
#one {
background-color: #ee4524;
}
#two {
background-color: #a2c95c;
}
#three {
background-color: #945389;
}
.btn-primary {
color: white;
background-color: #018ca9;
border-color: #018ca9;
width: 100%;
margin: 0 auto;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
color: white;
background-color: #01778f;
border-color: #01778f;
}
h1 {
color:#945389;
font-weight:bold;
}
#media only screen and
(max-width: 767px) {
#box{max-width:100%;}
}
I figured it out, it is because I am using domain-forwarding with go-daddy. The masking is converting the code into this:
<html>
<head>
<title>minimindsacademy.com</title>
</head>
<frameset rows="100%,*" border="0">
<frame src="http://www.ayodlomedia.com/miniminds/home.html"
frameborder="0" />
<frame frameborder="0" noresize />
</frameset>
<!-- pageok -->
<!-- 11 -->
<!-- -->
</html>
Apparently the frameset tag isn't compatible with HTML5, thus, I am assuming thats where the error is coming from.
It looks like your hero section just doesn't get enough height to fill the screen. If you add min-height: 100vh to the .hero class that makes the background fill the screen.
Is that what you were referring to?
I have created a mobile application using ionic framework. It consist of many html pages. For android version KitKat, the pages are displaying correctly. For android version Jellybean, the pages are displaying differently. Please see the html &css code?
Login.html
<ion-view hide-nav-bar="true ">
<ion-content scroll="false">
<div class="row" style="padding:29px">
<div class="col">
<div class="text-center">
<h1 class="text-font-white">Welcome</h1>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="line-white"></div>
</div>
</div>
<div class="row">
<div class="col">
<input class="input" placeholder="{{user}}">
</input>
</div>
</div>
<div class="row">
<div class="col">
<input class="input" type="password" placeholder="{{password}}">
</input>
</div>
</div>
<div class="row" style="padding:30px 0">
<div class="col">
<button type=submit id="login-btn" ng-click="doLogin()"></button>
</div>
</div>
<div class="row" style="padding:2px 0">
<div class="col">
<button type=submit class="btn-white" ng-click="openRegistration()">Register your account</button>
</div>
</div>
<div class="row" style="padding:34px 0">
<div class="col">
<div class="item item-image" id="logo">
<img src="img/logo.png">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="text-center">
<h4>Forgot password?
<span><a href="#/forgetpwd" style="text-decoration:none;color:white">
Recover it</a></span>
</h4>
</div>
</div>
</div>
</ion-content>
</ion-view>
style.css [I have included styles that is related to Log.html page]
ion-view {
background-image: url("../img/bg.png") !important;
background-repeat: no-repeat;
background-size: cover
}
.text-font-white {
color: white;
}
.text-font-white {
color: white;
}
.line-white {
width: 100%;
background-image: url("../img/title_line_white.png");
background-position: center;
background-repeat: no-repeat;
height: 20px
}
.input {
width: 97%;
background: white;
border-radius: 20px;
border: 2px solid rgba(256, 256, 256, .4);
padding: 4px;
font-family: 'Lato-Black';
}
#login-btn {
width: 97%;
background: transparent;
border-radius: 20px;
border: 2px solid rgba(256, 256, 256, .4);
padding: 14px;
background-image: url("../img/icon_key.png");
background-repeat: no-repeat;
background-position: center;
background-size: 28px;
}
#logo {
background-color: transparent;
border-width: 0
}
Different versions of android shows design differently, how to solve the problem?
Different Android versions have different WebView, with different support for html/css. For example svg is only partially supported before android 4.4.
Unfortunately only from Android 4.4 it's possible to remote debug your application with Chrome.
Check manually what css properties are failing across different Android version, then try to find a workaround (search and ask here).
Visit below link, you can get more ideas about Android Screen Sizes from it:
http://developer.android.com/guide/practices/screens_support.html
I have a issue with a page, on desktop it looks normal but on Android some text it's too big
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>raulx222's gallery</title>
<style>
#font-face {font-family: PressStart;
src: url(Fonts/PressStart2P.ttf);}
#font-face {font-family: Bitwonder;
src: url(Fonts/8-BIT-WONDER.TTF);}
body {background-color:#242424;}
.shadow{text-shadow: 1px 1px 1px #000;}
.md5{font-family:PressStart;
color: white;
font-size:10px;
text-shadow: none;}
.right{position: absolute;
padding:5px;
right:20px;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);}
.row{position:relative;
border-radius:25px;
background-color:#242424;
padding:5px 15px;
margin:5px 0;}
.button:hover{background-color:#33AD5C;
border-radius:25px;
box-shadow: 4px 4px 7px #000;
color:#242424;}
div#title {color:#33AD5C;
font-family:Bitwonder;
font-size:70px;
text-shadow: 4px 4px 7px #000;}
div#center {width:1000px;
margin:0 auto;
text-align:center;}
div#card {position:relative;
background-color:#33AD5C;
text-align:left;
font-family:PressStart;
color:#33AD5C;
margin:50px;
border-radius:10px;
padding:20px;
box-shadow: 4px 4px 7px #000;}
span#androidfh{font-size:10px;
color:#CCFF33;
position:absolute;
right:10px;
bottom:5px;
text-decoration: underline;}
span#androidfh:hover{color:#FFFF00;}
span#new{color:red;}
span#old{color:#CCFF33;}
a {
color: inherit;
text-decoration: none;}
</style>
</head>
<body>
<div id="center">
<!-- Title -->
<div id="title">
raulx222
</div>
<!-- Card/menu/whatever -->
<div id="card" class="shadow">
<span id="androidfh">AndroidFileHost folder</span>
<span id="new">*NEW*</span>
<!-- The first row! -->
<div class="row">
<span>AROMA-LP-GAPPS-20150320[438.3MB]
</span><br />
<span class="md5">
<sup>MD5: 2fe69a5fb4cf2ddf58de9f2d92591ef2
</sup>
</span>
<span class="right button">Download</span>
</div>
<span id="old">*OLD*</span>
<!-- The second row! -->
<div class="row">
<span>AROMA-LP-GAPPS-STOCK-20150222[439.2MB]
</span><br />
<span class="md5">
<sup>MD5: 013c613f6d02be5b218adf876bbe2b62
</sup>
</span>
<span class="right button">Download</span>
</div>
<div class="row">
<span>LP-GAPPS-STOCK-20150202[430.8MB]
</span><br />
<span class="md5">
<sup>MD5: a2ad1b08178749c9ed7c2f496b91ca8f
</sup>
</span>
<span class="right button">Download</span>
</div>
<div class="row">
<span>LP-GAPPS-STOCK-20150125[422.3MB]
</span><br />
<span class="md5">
<sup>MD5: e75a1d5e5a6896a360c6fc49d3f1a6c6
</sup>
</span>
<span class="right button">Download</span>
</div>
<div class="row">
<span>LP-GAPPS-STOCK-20150123[424.6MB]
</span><br />
<span class="md5">
<sup>MD5: 4da4bba992ef3b3afb6a219a94b7941b
</sup>
</span>
<span class="right button">Download</span>
</div>
</div>
</div>
</body>
</html>
Screenshot from Android:
Screenshot from desktop:
I found that if I set a height to the element, then on Android the text keeps it's normal size. But I want the height to element to automatically extend if it's needed.
Only the text: NEW, OLD, AROMA(...), and MD5:(...) is too big, other text looks fine.
And here's the webpage url
Try using a viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
More details: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
In my phonegap app i want to implement horizontal scroll view. My html code
<div id="songsListPage" data-role="page">
<div id="alphabets" >
<a href="#" >#</a>
<a href="#" >A</a>
<a href="#" >B</a>
<a href="#" >C</a>
<a href="#" >D</a>
<a href="#" >E</a>
<a href="#" >F</a>
<a href="#" >G</a>
<a href="#" >H</a>
<a href="#" >I</a>
<a href="#" >J</a>
<a href="#" >K</a>
<a href="#" >L</a>
<a href="#" >M</a>
</div>
<div id="songs_list" data-role="content"> <!-- this should not scroll, but it is and showing white background on right side -->
<ul id="songsList" data-role="listview" data-theme="a"></ul> <!-- list is populated dynamically -->
<p>This is songs page</p>
<a href="player.html" id="playerBtn" data-role="button" class="ui-btn-active" ></a>
</div>
</div>
my css
#alphabets {
background:#000000;
display: block;
padding: 5px;
clear: both;
height: 30px;
margin-bottom: 22px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
width: 200%;
overflow-x: auto;
}
#alphabets a{ color: #ffffff; margin-left: 5px}
by giving "width: 200%" and "overflow-x: auto" i'm getting horizontal scroll but the problem is my rest of the screen is also scrolling horizontally so is there is any way to achieve this ?
Old Answer
The New HTML
<div id="songsListPage" data-role="page">
<table id="alphabets"> <!-- change "div" tag to "table" tag -->
<tr>
<td href="#">#</td> <!-- and "a" to "td" tag -->
<td href="#">A</td>
<td href="#">B</td>
<td href="#">C</td>
<td href="#">D</td>
<td href="#">E</td>
<td href="#">F</td>
<td href="#">G</td>
<td href="#">H</td>
<td href="#">I</td>
<td href="#">J</td>
<td href="#">K</td>
<td href="#">L</td>
<td href="#">M</td>
<td href="#">N</td>
<td href="#">O</td>
<td href="#">P</td>
<td href="#">Q</td>
<td href="#">R</td>
<td href="#">S</td>
<td href="#">T</td>
<td href="#">U</td>
<td href="#">V</td>
<td href="#">W</td>
<td href="#">X</td>
<td href="#">Y</td>
<td href="#">Z</td>
</tr>
</table>
<div id="songs_list" data-role="content">
<ul id="songsList" data-role="listview" data-theme="a"></ul>
<!-- list is populated dynamically -->
<p>This is songs page</p>
<a href="player.html" id="playerBtn" data-role="button" class="ui-btn-active" ></a>
</div>
</div>
Updated CSS
#alphabets {
background:#000000;
display: block;
padding: 5px;
clear: both;
height: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
width: auto; <!-- changed width from 200% to auto -->
overflow-x: auto;
}
#alphabets td{ color: #ffffff; font-size: large;
margin-left: 5px; padding-left: 5px; padding-right: 5px;}
<!-- rest of the changes in css are for proper view (UI) like height: auto; padding-left: 5px; (in td) etc -->
http://jsfiddle.net/CXAWE/ (for those who do not want a TABLE TR TD solution)
This will work perfectly in phone (android) browser. The Table TR works better for mobiles - it will and always has and continue to do so. I always use a TABLE for guaranteed results especially in this case.
Updated New Answer
HTML for any mobile solution.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Alternative to Mobile WAP and iPad/iPhone etc</title>
<!-- Mobile Web App Acceleration - Powered by WordCompress.net //-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all, handheld" />
</head>
<body>
<div id="b">
<div id="content">
</div>
</div>
</body>
</html>
CSS
body { overflow-x: hidden; }
#b {
margin: 1px;
}
#content {
background: none repeat scroll 0 0 #FFFFFF;
}
Notice viewport width is device-width and also notice that the body, has no width, and neither does the content. You can now guarantee that all phones will display 100%. You can change the overflow to y or x too.