Designing Web Pages for the iPhone

[rupchurc]

http://www.joehewitt.com/blog/iphone_tips_loo.php

The basics:

<script type="application/x-javascript">

addEventListener("load", function()
{
setTimeout(updateLayout, 0);
}, false);

var currentWidth = 0;

function updateLayout()
{
if (window.innerWidth != currentWidth)
{
currentWidth = window.innerWidth;

var orient = currentWidth == 320 ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
setTimeout(function()
{
window.scrollTo(0, 1);
}, 100);
}
}

setInterval(updateLayout, 400);

</script>

I used the css script in the demo above, but ive noticed one problem im hoping someone knows the answer to. When you switch from landscape to portraite after using the back button the main page is sometimes blown up wither way you view it. Refreshing fixes the problem but it only happens when you hit the back button to view the previous page. This is stating using that layout in that demo for each content page. exsample see http://www.lexerd.homeip.net/projectiphone.html click on a link let it load, then go back and toggle to landscape or portraite.

[mikeyman70]

i havent been able to get my site working right
i keep getting stuck, for some reason the page
doesnt cover the whole screen, it leaves a small white border
around the edges, idk why, i also need to figure out
how to link the alert popup so that when you press
cancel it only closes the box and doesnt redirect you,
and when you push ok is actually searches the entered text
another thing i would have to do is make a search icon that
matches the banner

if you think you can help please PM me

[cainy393]

I would suggest using a proper iphone style, with the rounded boxes and everything. if you can't be bothered to write this however the nick tytubes, just make all your layout completley plain with no special features, and paste this code into your head tag:

<link href="http://tytube.net/css/style.css" rel="stylesheet" type="text/css" />

Checkout my iphone site: Wills iPod Touch

it's an iphone version of my original: Wills iPod Touch

[nitikasnv]

Hi,

I am very overwhelmed,

i am thinking to get in the development field i love to do scripting.Its very great that your providing tips for how to design a web page for iphone.

I will definitely try it

Thanks

[emo-3amer]

Hey everyone , please check out my site 4 iPhone (iSite Template) and tell me my mistakes

I really don't know what to put inside

anyway here it is

blacknatur3.2kool4u.net/m

[OliphanT]

Hate to be the bearer of bad news but all I am getting from http://iphone.modmyi.com is

Index of /
Name Last Modified Size Description

And then no files listed.

Pretty sure it shouldn't be doing this?

Regards

OliphanT

[0NLYJDOG13]

Thx

[Co2Noss]

Thank you thank you thank you! Can't say it enough. There is a nice app on the iTunes store, but I like to do things myself. Wonderful hints and tips.

[Jon444555]

is this the type of design you're talking about. Link

[paul123paul]

on iphone 100% just gets changed by mobile safari to "width="auto" just saying good to know