Mobile site woes

dumdumsareyum · May 19, 2010

Hello all,

I need some major help

I am trying to create a mobile site for an existing website. It is used for a company workorder system and not on the WWW or I would post a link to it.

When I use the meta tag

it works sort've okay on the iPhone except when switching back and forth between landscape and portrait it doesn't autofit.

But I've been told the scaling doesn't work at all on android. So I went back through the mobile style sheet and removed everything that uses px or fixed widths and everything is in percentages or not defined at all, and I removed the meta tag for the iPhone. So then it didn't fit to the device width and scales it down tiny as though it is a large webpage. I tested removing the stylesheet completely for mobile (I am using a get variable for mobile site not device recognition) and the iphone still thinks it is huge site and scales my test webpage down to teeny tiny.

I was looking at the dell mobile site as an example http://mobile.usablenet.com/mt/www.dell.com

It doesn't look like it use the iphone meta tag or any kind of device recognition and yet it still works beautifully. Everything I've read online says to just not use fixed dimensions or pixels and you'll be fine.....so why, why isn't this working? :confused:

Please help, I have been staring at this thing for hours.

Thanks!

xcoderx · May 19, 2010

no need for iphone meta tags.

try this out and fix ur issues

<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WapSite</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

body {
background: #9cb1c3;
font: normal small Arial, Helvetica, sans-serif;
color: #131c24;
}

img {
border: 0;
}

h1, h2, h3 {
color: #4f6b83;
}

a {
color: #4f6b83;
}

a:hover {
color: #4f6b83;
text-decoration: none;
}




/* Boxed Style */

.boxed {
margin-bottom: 5px;
border: 1px solid #ffffff;
}

.boxedTitle {
height: 18px;
padding: 0 0 0 2px;
background: #435a6e;
border-bottom: 1px solid #ffffff;
}

.boxedTitleText {
font-size: 11px;
color: #ffffff;
}

.boxedContent {
padding: 2px 2px 2px 2px;
background: #d1dbe3;
}


/* Boxed Style Error*/

.errorBoxed {
margin-bottom: 5px;
border: 1px solid #ffffff;
}

.errorBoxedTitle {
height: 18px;
padding: 0 0 0 2px;
background: #435a6e;
border-bottom: 1px solid #ffffff;
}

.errorBoxedTitleText {
font-size: 11px;
color: #ffffff;
}

.errorBoxedContent {
padding: 2px 2px 2px 2px;
background: #d1dbe3;
}




/* Bullet */

.bullet {
width: 12px; 
height: 12px;
border: 0px;
}




/* Logo */

#logo {
     width: 160px;
 background: #9cb1c3 url(../logo.gif);
 background-repeat:no-repeat;
}




/* Input, Buttons */

#inputText {
background-color:#d8e0e7;
color:#4f6b83;
border: 1px solid #ffffff;
}

#inputButton {
background-color:#d8e0e7;
color:#4f6b83;
border: 1px solid #ffffff;
}




/* Footer */

#footer {
width: 100%;
padding: 5px;
}

#footer p {
text-align: center;
font-size: x-small;
}

</style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Cache-Control" content="must-revalidate" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta name="keywords" content="wap" /><meta name="description" content="is the best" /><link rel="shortcut icon" href="favicon.ico" />
</head>
<body>

<table border="0" cellspacing="0" cellpadding="0" height="60" width="159"><tr>LOGO HERE</td></tr></table>
<table border="0" width="99%" cellspacing="0" cellpadding="0" class="boxed">
<tr>
<td class="boxedTitle">
<h1 align="center" class="boxedTitleText">Welcome to wapsite!</h1></td>
</tr>
<tr>
<td class="boxedContent">
<center><small><a href="register/?lang=&refer=">Register</a> now to Enjoy tons of unique features and services like Forums, Chat, Blogs, Polls, Downloads, Gallery, Online Games, and many more.<br/><br/><a href="?lang=en">English</a> | <a href="?lang=af">Afrikaans</a></small></center></td>
</tr>
</table>


<table border="0" width="99%" cellspacing="0" cellpadding="0" class="boxed">
<tr>
<td class="boxedTitle">
<h1 align="center" class="boxedTitleText">Log In</h1></td>
</tr>
<tr>
<td class="boxedContent">
<center><form action="login/" method="get">Username:<br/><input id="inputText" type="text" name="un"/><br/>Password:<br/><input id="inputText" type="password" name="pw"/><br/><input id ="inputButton" type="submit" value="Login"/></form></center><img class="bullet" alt="" src="_themes/default/bullet1.gif" align="middle"/><a href="register/?lang=&refer="> Register</a><br/></td>
</tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td id="footer"><p id="legal">© wapsite 2009</p><br/><p id="links">| <a href="features/?lang=">Features</a> | <a href="terms/?lang=">Terms of Use</a> |<p id="links">| <a href="?action=stats&lang=">Site Stats</a> |</p></td></tr></table>
<table border="0" width="99%" cellspacing="0" cellpadding="0" class="boxed">
<tr>
<td class="boxedTitle">
<h1 align="center" class="boxedTitleText">Adds</h1></td>
</tr>
<tr>
<td class="boxedContent">
<center><small>
<a href="http://ads.com/></a><br/>
</small></center>
</td>
</tr>
</table>

</body>
</html>

dumdumsareyum · May 19, 2010

Okay, I tried the test page and I'm still kind've having an issue...When I first load the page in my iphone it does not look fitted to a mobile page. A couple of times if I hit the login button and then go back the page appears fitted like a mobile page, but then if I reload the page it is scaled down again. This is so frustrating!

Sign In

Mobile site woes

Recommended Posts

dumdumsareyum

Link to comment

Share on other sites

xcoderx

Link to comment

Share on other sites

dumdumsareyum

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information