How to build a website for the iphone with orientation detection | Engage Interactive Blog

Jun

Tutorial: Building a website for the iPhone
…written by Will and has 230 comments so far

How to build an iphone website!

Well, we did promise we’d get around to a tutorial eventually, so here you have it! The Engage Interactive school for all things internet proudly presents: How to build a website with orientation specific content especially for the iPhone!

This tutorial will cover the basic setup and creation of a web page for the iPhone that will detect and change the content based on the phones orientation. You will need some way of viewing your files on the iPhone or you wont see the fruits of your labour. We’d suggest uploading it to a location on the web and browsing to it on the phone. Other than that everything else can be done with any old text editor. Anyway, enough chat – Onward to the tutorial!

UPDATE:
I completely forgot to mention how to detect the iPhone on your normal website and send it to your iPhone version. I’ve added the script here.

Setting up your page

Just like any other web browser, Safari needs all the usual html code at the top and bottom of the page and there’s still no harm in throwing a few keywords in for good measure as Google will still be able to spider your content. In addition there are also some iPhone specific meta tags you can use to control the way content is rendered. I have an example of what the code in the head tag should look like below.

<head>
	<title>Engage Interactive</title>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
	<link rel="apple-touch-icon" href="images/template/engage.png"/>
</head>
<body onorientationchange="updateOrientation();">
</body>

If you look at lines 3, 4 and 6 you’ll see a few lines you probably haven’t come across before.

Line 3 tells Safari that the viewport should be the same size as the iPhone screen. Usually the iPhone’s screen acts like a window and the web page is the background scenery. Setting this line forces the content to always fit the window. The next part of that line sets the scale of the page. Because we are making this website specifically for the iPhone’s small screen we don’t need to have the page zoomed in.

Line 4 is for creating webclip icons when you bookmark a site. The image should be 57px by 57px in .png format. You do not need to add the shine or corners as the iPhone will do that for you.

Line 6 is part of the orientation detection. Safari simply executes a javascript function each time you turn the phone. This however doesn’t have any way of acting upon which way the phone is being held. The javascript has to take care of that aspect. More on that later.

For more options on the viewport check out this page (you need to be registered with the apple developer program).

Laying out the content

Before we get into the clever javascript and CSS we need to get the content in place and set the initial styles that will be default so that you can’t see everything at once before the site has finished loading.

<div id="page_wrapper">
	<h1>Engage Interactive</h1>
	<div id="content_left">
		<p>You are now holding your phone to the left</p>
	</div>
	<div id="content_right">
		<p>You are now holding your phone to the right</p>
	</div>
	<div id="content_normal">
		<p>You are now holding your phone upright</p>
	</div>
	<div id="content_flipped">
		<p>This doesn't work yet.</p>
	</div>
</div>

First, we need a wrapper that will contain all the content on the page. This is very important as the javascript will be changing the class of this wrapper which will effect a lot of elements inside of it.

Next, I’ve put in a logo. This is optional obviously, but it’s an example of content that will always be visible regardless of the orientation should you want it to be.

Lastly, we have all the content areas. Although at the moment the iPhone only supports left, right and upright orientations there is a chance that it might eventually support a flipped over orientation (holding the phone upside down) so I’ve put it in just in case. Each of these content areas are unique so we may as well use ID’s rather than classes.

These will be set to display:none and display:block and apart from that it’s probably best to avoid anything more complicated than background colours/images and dimensions. Leave that to the content within them.

Onto the CSS

The CSS is very important in switching the content. Using classes and ID’s we can make sure that only the correct content is being displayed. First though, we need to set up the page so that none of the iPhone’s default styles will interfere.

/*-----------------------------
RESET STYLES
-----------------------------*/

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
	margin:0;
	padding:0;
	-webkit-text-size-adjust:none;
	}
body{
	font-size: 10px;
	}
ul, li, ol, dl, dd, dt{
	list-style:none;
	padding:0;
	margin:0;
	}
a{
	text-decoration:none;
	}

The most important part in that is the -webkit-text-size-adjust:none; This line stops Safari from adjusting the text size when you rotate the screen. By default it assumes that holding the iPhone on it’s side requires larger text size – which is true in most cases as the sites become more zoomed out – but in this case we are fitting the website to the screen so it’s not necessary.

/*-----------------------------
	BASIC PAGE STYLING
-----------------------------*/

body{
	background:#fff000;
	font-family: Helvetica;
	color:#999;
	}
p{
	font-size:12px;
	padding-bottom:8px;
	}
a{
	color:#fff000;
	text-decoration:none;
	}

/*-----------------------------
	HEADINGS
-----------------------------*/

h1{
	display:block;
	width:112px;
	height:41px;
	background-image:url(images/logo.gif);
	text-indent:-5000px;
	}

/*-----------------------------
	BASIC LAYOUT
-----------------------------*/

#page_wrapper{
	padding-top:20px;
	background:#000 url(images/page_background.gif) repeat-x;
	overflow:auto;
	}

These styles simply set the colours and font sizes for a few elements and also style the logo and page wrapper. You may have noticed, I’ve used the font Helvetica. It’s already on the iPhone and it’s a great font so I might as well. No more Ariel!

Using overflow:auto on the #page_wrapper is simply so that any floated elements do not overflow the containing div. It’s the (far better) alternative to <br class=”clear” />

The complicated CSS

The following CSS controls which containers are currently on display and which are hidden which will be controlled by the javascript we’ll get to in a bit.

/*-----------------------------
	ORIENTATION CLEVERNESS
-----------------------------*/

#content_left,
#content_right,
#content_normal,
#content_flipped{
	display:none;
	}

First we need to hide everything by default. When the page loads this will ensure that you don’t get an ugly flash of content before it is hidden.

.show_normal,
.show_flipped{
	width:320px;
	}
.show_left,
.show_right{
	width:480px;
	}

Next the width of the containers is specified. If you’re building a site that fits the screen exactly you might want to put some heights in here.

.show_left #content_left,
.show_right #content_right,
.show_normal #content_normal,
.show_flipped #content_flipped{
	display:block;
	}

Finally the clever bit (well, not that clever really). This simply shows the containers if the #page_wrapper has the correct class. These classes are going to be set by the javascript. It would be possible to do it all with javascript, however I built the Engage site with several little tricks in place that needed the classes to apply certain styles.

The grand finale: Orientation Detection (and another useful trick)

This is the genuinely clever bit! Now I must admit, I didn’t write all of this myself, various parts have come from numerous examples and samples from around the web. I’ve listed a few of the resources I used at the end of this article. The concept however is a genuine Engage Interactive exclusive!

window.onload = function initialLoad(){
	updateOrientation();
}

This first line initialises the orientation change. Without this, the orientation wouldn’t be detected on load, only on the first time it is changed.

function updateOrientation(){
	var contentType = "show_";
	switch(window.orientation){
		case 0:
		contentType += "normal";
		break;

		case -90:
		contentType += "right";
		break;

		case 90:
		contentType += "left";
		break;

		case 180:
		contentType += "flipped";
		break;
	}
document.getElementById("page_wrapper").setAttribute("class", contentType);
}

This is the function that actually makes the changes to the page that allow the different content to be displayed. Lets go over it step by step:

Line 1 names the function which is run each time the phone is turned. This was what we enabled earlier in the body tag.
Line 2 sets the variable contentType to the default show_
The following lines check the case (orientation) until it finds the appropriate one and breaks out of the out of the switch block appending the relevant term to the end of the contentType variable
Finally the javascript finds the page_wrapper div and sets the class to the value of contentType. From there the CSS takes over and styles the page accordingly.

Clever huh?

There is also one more little trick we’ve used to make the most out of the iPhone’s nice big screen.

window.addEventListener("load", function() { setTimeout(loaded, 100) }, false);

function loaded() {
	document.getElementById("page_wrapper").style.visibility = "visible";
	window.scrollTo(0, 1); // pan to the bottom, hides the location bar
}

This javascipt waits until the page has loaded and then scrolls to the named element. In this case, page_wrapper. This hides the location bar straight away rather than having to scroll it manually off the screen. Handy if you want to make a page that fits the iPhone exactly.

Source files

To view the finished example head to www.engageinteractive.co.uk/tutorials/iphone/ on your iPhone. It wont work on your computer obviously, but you can still have a look at all the code.

Right click and save as on the following files to download the source.

The HTML: index.html
The CSS: iphone.css
The Javascript: orientation.js
The tutorial: tutorial.html
Everything zipped up: source.zip

So that was the technical side of building a website for the iPhone, you’ll have to come up with creative stuff yourselves. I’ve listed a few helpful pages and resources that should help you on your way below.

Things to remember

Before you embark on your own iPhone website, here are a few things I had to keep reminding myself:

Every single iPhone is the same. If it works on one, it works on all the others. How nice it is to not have to bug check!
You can design your site to fit pixel perfectly to the width and height.
Don’t worry about using image replace for usability reasons (SEO reasons still apply however), the iPhone doesn’t cater to people who would use screen readers so it’s not necessary. On a related note; there is no way of increasing text size, so feel free to use pixel sizes instead of em’s or percentages.
There is no :hover status! The iphone only has on or off. Your finger is the mouse and dragging is how we scroll the page. Thus, no need for hover states in your CSS.
The iPhone has limited processing power and memory. Regardless of internet speed, large images or complicated javascript does slow down the iphone. Sometimes even cause it to crash.

Useful resources

Apple has kindly supplied a whole host of information for people to use when they embark on a web application for the iphone. Hidden away under many layers helpful hints though I’ve found the most important pages (which you have to register to use):

These links worked at the time of writing, but as I’ve discovered over the last few months, Apple seem to insist on reorganising everything on what seems to be a weekly basis. So what is there one week might be mysteriously moved the next. They have a pretty good search though so you shouldn’t have much trouble re-discovering the pages linked above.

And absolutely nothing to do with Apple themselves, I found this little gem. A great source of examples for Safaris abilities. My favourite being the ability to round corners with a simple line of CSS!

I hope you found this little tutorial useful, and don’t forget to post a comment with a link to your own creation, we love to hear from you!

Oh, and I completely forgot!

This little bit of script will detect the iPhone or iPod touch and send it on it’s merry way to whatever page you wish.

if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "http://www.engageinteractive.co.uk/iphone/";
}

Tags: CSS, iPhone, javascript, tutorial

Vinci Says:

Brilliant post! Would send you a link to my own iPhone-compatible site once its ready
July 8th, 2008 at 11:59 pm
MEL Says:

Great tutorial! We hae been looking at embarkin into website development for mobiles and this tutorial is a great starting point for smaller agecies like ourselves who do not have the means to employ teams of developers to do the work.

Once agai many thanks for your efforts!
July 10th, 2008 at 12:21 pm
Mohd Heidzir Says:

Awesome post! Usefull for people dont have access to Apple Developer page.
July 14th, 2008 at 5:23 am
Eugene Gordin Says:

First of all, thank you SO much for this tutorial! Its very helpful and I was able to take advantage of it in order to hide a wide table which would be impossible to read in portrait but acceptable in landscape mode.

How would I hide not one but two div’s on one page using this method since you’re using an ID as opposed to a CLASS?
July 25th, 2008 at 2:52 am
Eugene Gordin Says:

Sorry to respond to my own question, but I have figured out how to do this for two different elements. Just in case anyone else is interested in how I did this – here’s how:

1) Changing the CSS code to relate to classes, not id’s:
.content_left,
.content_right,
.content_normal,
.content_flipped{
display:none;
}
.show_normal,
.show_flipped{
width:320px;
}
.show_left,
.show_right{
width:480px;
}

.show_left .content_left,
.show_right .content_right,
.show_normal .content_normal,
.show_flipped .content_flipped{
display:block;
}

2) Then I replaced the end of the code on the javascript in order for it to apply to two different IDs:

document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);
document.getElementById(“2ndpage_wrapper”).setAttribute(“class”, contentType);
}
3) I changed the HTML code for the content section to refer to classes instead of IDs (which ties it back to the css) for example:

Please turn your phone to see the table.

4) Lastly I gave the other section that I wanted to change on orientation the new ID that I referred to in the javascript:

That’s it. I hope that helps whoever’s interested in this. If you have any questions, please contact me on my website.

Thanks again to the Engage Interactive crew for this EXTREMELY useful and helpful tutorial. Keep up the great work guys!
July 26th, 2008 at 9:29 am
Will Says:

Hi Eugene,

Sorry for not getting back to you sooner, looks like you’ve got it sorted though!
Glad you found the tutorial useful.

Will
July 29th, 2008 at 12:52 pm
andrea Says:

Fantastic but I’ve a question. How can I implement orientation detection to switch between one css and another? Basically I’ve a page with some images; in the css I’ve an img class that set the width to 280 in portrait mode. I would like that if the user switch to landscape, this class set img width to 580 or something like that?

Any idea on how to do that?

Thanks!
July 30th, 2008 at 6:02 pm
Will Says:

Hi Andrea,
You would do something like this:
```
.show_normal img,
.show_flipped img{
	width:280px;
	}
```
When the javascript sets the class of the page_wrapper to either show_normal or show_flipped it will set the width of images to 280px.
```
.show_left img,
.show_right img{
	width:580px;
	}
```
And this will set them to 580px in the left or right landscape views.

This css would resize all images, but if you only target specific class you would limit it to just the images with that class.

Hope that makes sense.

Will
July 31st, 2008 at 9:24 am
CT Says:

So I dont need any specific Apple Software from the whole SDK thing to create a iphone specific site?

This tutorial should be really helpful.
August 5th, 2008 at 9:15 pm
Rob Blakeney Says:

Great tutorial!

Im using this method to do something a bit different. When the iPhone is in portrait it show a small cut down version of the site, but when in landscape, it shows a full version.

The problem i am having is that when im zoomed in on the portrait verion and rotate the phone, the landscape version is zoomed in, when i zoom out and then go back to the portrait version, it is zoomed out and only occupies about 1/4 of the screen.

Is there a way to tell the iphone to reset the zoom each time it is flipped so that in portrait its 100% and in landscape its zoomed out so its fits the screen?

Cheers

Rob
August 14th, 2008 at 3:24 pm
Guisella Says:

How do you detect if you are on a pc or iPhone, I mean when you enter to http://www.engageinteractive.co.uk from a normal web browser you see this website, but if you enter from the iPhone you see the exclusive iPhone version, how you do that detection in first place?

Thank you, great tutorial
August 20th, 2008 at 11:14 pm

Will Says:

Oops! I seem to have forgotten to mention that bit. Simply place this code (I’ll put it in the article properly in a bit) in to the head of your normal website:

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "http://www.engageinteractive.co.uk/iphone/";
}
</script>

August 21st, 2008 at 9:17 am

Chuck Says:

Hey there! I love this tutorial an dam so happy to use it! I have a couple of problems though. The screen size and text stuff are working perfectly fine. But…. there are no background colors showing up or anything and it won’t change texts when I turn it. Do I have to do something else?

My codes are below (I didn’t copy and past either, its fun writing by hand )

Test

Test

You are now holding your phone to the left.

You are now holding your phone to the right.

You are now holding your phone upright.

This doesn’t work yet.

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
margin:0;
padding:0;
-webkit-text-size-adjust:none;
}
body{
font-size: 10px;
}
ul, li, ol, dl, dd, dt{
list-style:none;
padding:0;
margin:0;
}
a{
text-decoration:none;
}

——————————————-

body{
background:#fff000;
font-family: Helvetica;
color:#999;
}
p{
font-size:12px;
padding-bottom:8px;
}
a{
color:#fff000;
text-decoration:none;
}

——————————————-

h1{
display:block;
width:112px;
height:41px;
background-image:url (images/logo.gif) ;
text-indent:-5000px;
}

——————————————-

#page_wrapper{
padding-top:20px;
background:#000 url(images/background.gif) repeat-x;
overflow:auto;
}

——————————————-

#content_left,
#content_right,
#content_normal,
#content_flipped{
display:none;
}

.show_normal,
.show_flipped{
width:320px;
}
.show_left,
.show_right{
width:480px;
}
.show_left #content_left,
.show_right #content_right,
.show_normal #content_normal,
.show_flipped #content_flipped{
display:block;
}

window.onload = function initialLoad () {
updateOrientation () ;
}

function updateOrientation () {
var contentType = “show_”;
switch (window.orientation) {
case 0:
contentType += “normal”;
break;

case -90:
contentType += “right”;
break;

case 90:
contentType += “left”;
break;

case 180:
contentType += “flipped”;
break;
}
document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);
}

——————————————-

window.addEventListener (“load”, function () {setTimeout (loaded, 100) }, false);

function loaded() {
document.getElementById (“page_wrapper”).style.visibility = “visible”;

window.scrollTo (0, 1);

Thanks if you can help!
August 31st, 2008 at 1:22 pm
Robert Says:

Great tutorial, though for some reason it doesn’t seem to be working for me. Tried rebuilding myself and the flipping change of content wasn’t working, then I downloaded the source and popped that up on my server and the same thing: no change when the phone flips.

Any idea what could be happening?
September 2nd, 2008 at 6:40 pm
Will Says:

@Chuck,
I’m not really sure why you wouldn’t be seeing any background colour. It looks like all the necessary CSS is in place. Perhaps you haven’t closed some tags in the HTML. Have you stuck it through the validator?

@Robert,
I’m not sure what could be the problem. I’ve just checked out all the code and it does seem to be working still. It’s probably one of those annoying little errors that you don’t notice until you’ve ripped the whole thing apart and put it back together again only to find out you spelt srcipt wrong! :p

I’d make the same suggestion, check if it validates.
September 3rd, 2008 at 9:40 am
Robert Says:

Hmmm, still have no idea what I could be doing wrong. I tried just downloading the source file and uploading that without touching it, and that’s not working either.

Here’s the URL: colinismy.name/mobile

Any thoughts?

Thanks!
September 4th, 2008 at 4:15 pm
Will Says:

Hi Robert,
I just had a look, and it does work… but only if you visit the actual location of the site.

For some reason you’ve got frames on that colinismy.name/mobile site. If you go to the source of that frame: http://s125533792.onlinehome.us/yesitsureis/mobile/ it works fine.

Perhaps it is something to do with your hosting?

Will
September 4th, 2008 at 4:24 pm
Robert Says:

Ah! That’s the ticket. I had it set up on a frame redirect instead of a HTTP redirect.

Thanks a million: you’re a saint among men!
September 4th, 2008 at 5:25 pm
Chuck Says:

Ok… so I got it to finally work! You can view my website on your iphone now. I really like it. Thanks for the tutorial. Maybe you wouldn’t mind buying it for $2.50, no one has yet. Thanks for the tutorial! http://www.madchucksailing.com/iphone/index.html
September 17th, 2008 at 7:44 pm
Ryan Bollenbach Says:

I love my iPod Touch so it feels natural for me to create things for the iPhone.

This article has kicked me in the right direction towards creating websites that are iphone ready.

Thank you so much for taking the time to write this and making it so easy to understand.

I can’t wait to create my first iPhone based design.

Thanks again.
September 28th, 2008 at 8:18 am
julianrobt Says:

we find a lot of improvement in the technology using the mobile is prevalent in present day life but creating a website to know about it. I need to know more about this site can any one tell me about it briefly.

julianrobert

[url=http://www.widecircles.com]Link Building[/ul]
October 20th, 2008 at 6:18 am
julianrobt Says:

we find a lot of improvement in the technology using the mobile is prevalent in present day life but creating a website to know about it. I need to know more about this site can any one tell me about it briefly.

julianrobert

Link Building
October 20th, 2008 at 6:21 am
jen Says:

Thanks for all this. A number of the links you provided are no longer working.

Do you know how to code phone numbers so that they appear as links on the iPhone?

I love it when sites let me do this, and want to implement.

Thanks!
October 23rd, 2008 at 3:04 am
Will Says:

Yea, apple are a pain. They change their development site almost daily!

To create a phone number you can just type it out and the phone will automatically format it into a link. I think there are a few options available but I never needed to use them.

Sorry not to be of more help.

Will
October 23rd, 2008 at 11:27 am
Kylie Cooper Says:

Hi,
Thanks for the tutorial. I was pretty sure I followed all steps, and when I view it on my iPhone it works perfectly. But when my friend views my website on her iPhone the page doesn’t show. I’ve asked her to clear her history, cookies and cache and still doesn’t show.

Is there an online iPhone screen shot website where I can view the appearance? Or does anyone know why its not working on her iPhone but works on mine? I don’t know anyone else that can check it out for me. website is: http://www.logomotion.net.au

Any tips much appreciated.
Thanks, Kylie
November 10th, 2008 at 8:41 am
Aman Patel Says:

Hi ,

Thank you very much. Very nice tutorial. Keep Posting.
November 11th, 2008 at 8:31 pm
nana Says:

Dear,
I want to create a website for the iphone, i found this tutorial is very interesting, but please i need more details because it is my first time. what is the first step to start, like what is the first file i have to write and his name with the extension..and where i can do the test?

i’ll be more than happy if anyone can help me to start…

Thankyou
November 19th, 2008 at 9:35 am
nana Says:

hi again,
i downloaded the source and when run it i got a yellow page, but empty nothing inside..by the way i ‘m using wamp server..our website is done using PHP..
please if you can put me on the right track to start,

thanks a lot
November 19th, 2008 at 10:18 am
Will Says:

I’m not sure what could be the problem.
First thought is that the way we have referenced the files is not correct for how you have set up the folder structure on your website.
Try turning on the developer mode in safari on your iPhone. It is in the options > safari menu page. This will show any javascript errors in case that is what’s going on.

Good luck
November 19th, 2008 at 10:22 am
nana Says:

thank you, but i really want to know how can i do test on the iphone, i mean shall i have an iphone on the web, because i dont have one..i want to start building an iphone website, but i dont know how to start..

thanks a lot for your attention and reply
November 19th, 2008 at 10:51 am
kyle Says:

A general question… why is that when I view the finished example on your site it appears correctly, but when I download the source files and upload them to my site (unaltered) to test them, the content does not fill the iPhone screen?

Thanks!
November 20th, 2008 at 6:31 pm
Chad Says:

I have everything working for a new iPhone design for my portfolio site except for the content. I can’t get any of the content to show up when I go to the site on the iPhone browser… rotated or not, makes no difference. Any ideas why?

http://www.chadgilldesign.com/iphone
November 26th, 2008 at 3:42 am
Will Says:

Nana: You can download the iphone sdk from the apple development centre but I don’t think that will support the javascript that this uses. Failing that, you’ll need an iPhone, either a local or web server and notepad. :p

Kyle: I’m not sure what’s happening. Perhaps try setting a min-height on the wrapper see if that helps.

Chad: Taking a quick look at your CSS it looks like you’ve gone a little wrong somewhere. Your hiding all the content areas, but then there is no way of showing them again. It should look something like this:
```
.show_left .content_left{
	display:block;
}
.show_right .content_right{
	display:block;
}
```
And then you’ve got to hide the content that’s not needed with something like this:
```
.show_left .content_right,
.show_left .content_portrait{
	display:none;
}
```
You’ll need to adjust classes and id’s to your suiting obviously, but that should get you on the right track.
November 26th, 2008 at 12:40 pm
Amar c Says:

Hello there,
I had a question in my mind. If the browser is redirected to the
iphone designated page, how can one get back to the original
if they wanted to?

Thanks in adv
and great job!
December 29th, 2008 at 10:47 pm
Barbara Says:

Found this particular iPhone gaming website pretty cool on an iPhone… iPhone browsing is real fun
January 1st, 2009 at 10:34 am
Barbara Says:

Found this particular iPhone gaming website (http://www.99games.in) pretty cool on an iPhone… iPhone browsing is real fun…
January 1st, 2009 at 10:34 am
theturninggate Says:

Great tutorial!

I’d like to second Amar C’s question. If desiring to do so, how does one access the full site from the iphone without being redirected?

Could the script be setup so that a special URL might allow access of the full site, maybe something like http://www.domain.com/?=fullsite … ?
Thanks!
January 4th, 2009 at 1:13 am

Will Says:

Good question!
A variable in the url is probably the best bet, however, I wouldn’t be sure how to implement such a thing. Dave would know, but he’s still holidaying! I’ll let you know what he says.

If I was to do it without Dave’s help though I would use a cookie. The jquery cookie plug-in is really easy to use and would probably be a good bet.

Something like:


//Create a variable for the cookie
var whichSite = 'whichSiteCookie';

//Check if the cookie exists
if($.cookie(whichSite ) == 'fullSite'){
	//Stay on the full site
}else{
	//Go to the iphone site
}

//Buttons to take you to the different versions.
$('a.iphonesite').click(function(){
	$.cookie(whichSite , 'iphonesite', { path: '/', expires: 365 });
});

//I've set these cookies to last a year. For a session cookie you just take out that bit.
$('a.fullsite').click(function(){
	$.cookie(whichSite , 'fullsite', { path: '/', expires: 365 });
});

None of that is tested by the way, but it’s on the right track. (Work to do!)

January 5th, 2009 at 5:32 pm

theturninggate Says:

Thanks for the quick response, Will. I’m good with XHTML and CSS, but my Javascript is lacking. The presented solution sounds like a good start, though. I’ll definitely be looking forward to the follow up once Dave gets back.

Happy new year!
January 8th, 2009 at 5:30 am
Hunter Says:

Could some one post the css coding from that rounded corners thing he talks about near the end of the tutorial? I cant access it.
January 23rd, 2009 at 6:02 am
Will Says:

Hi Hunter,
Apple are a pain, they have once again changed the structure of their developer area rendering all the links useless.

The rounded corners CSS is
```
-webkit-border-radius: 5px;
```
If you Google that you’ll find more information on how to use it. It is webkit browser specific though, so only safari and Google chrome. For firefox you can use -moz-border-radius.

Thanks for reading.

Will
January 23rd, 2009 at 10:22 am
Jon Says:

copied you code and it works great on my iphone, but in a normal web browser no text shows up. would love some help.
January 25th, 2009 at 12:31 am
Will Says:

Hi Jon,
The code is specifically for the iPhone as a normal web browser does not have any ability to detect orientation.
What we’ve done is used http://www.engageinteractive.co.uk/iphone/ I think this is the best approach and then have a normal website on the root.
Cheers
Will
January 26th, 2009 at 10:22 am
Lion King Says:

hi, thanks for such a great tutorial, I found this very helpful and hopping that you keep posting great tutorials like this in future too!
January 27th, 2009 at 8:07 am
Rob Says:

Hi: Really simple simplification you can do – instead of:

window.onload = function initialLoad(){
updateOrientation();
}

you can do:

window.onload = updateOrientation;

Great article!
February 6th, 2009 at 5:28 am
Tenaya Says:

hiya,
I’m completly retarded.
thechillinchair.com

gets error with your script
February 7th, 2009 at 10:48 pm
Will Says:

I’ve just had a look at your website and I can’t see any code at all. It just looks like a blank page.
February 9th, 2009 at 10:30 am
Jaz Says:

I do not understand why. I have put the script :

in the head section for the website, but steel i does not get connected from my iphone to the iphone site. Why? Please check out: http://www.livetsgang.no
February 9th, 2009 at 7:17 pm
theturninggate Says:

Hi Will,

Did you or Dave ever come up with a complete solution for re-routing an iPhone to the full version of the site via URL, as we discussed above?

Thanks,
Matt
February 14th, 2009 at 7:47 pm
Liz Says:

This tut was awesome. The redirect is fab. Thanks so much for posting!! )
February 19th, 2009 at 2:20 pm
iTod Says:

Your tutorial put me on the right path but because I am such a novice I have a couple of questions?

1. please look at my mobile site http://www.gibbonsadvertising.com/iphone2/index.html. How do you make the white box with the black boarder expand as the phone is rotated to the left or right?

2. How do I link to secondary pages? I will have a navigation on the front page and want to link to more information?

Any help would be greatly appreciated. Thank you.

iTod
March 21st, 2009 at 7:25 pm
daddy design Says:

GREAT TUTORIAL!!! question.. what if i’m on the iphone version of site and i made a link for people to view the site in full website view? how do i make this possible, since it has the redirect. I see it all the time like foxnews.com has the link on bottom, for full view of website.
March 24th, 2009 at 4:08 am
Alex Says:

Hiya,

Great tutorial! Very easy to follow and to get your head around. However my question is:

Based on your tutorial you are basically showing 3 versions of the same content (for normal view, left view, right view), which – depending on the content – may be loading a hell of a lot of data (you are basically serving the normal DIV, the left DIV and, if it is looking different, the right DIV). Is there a way to show the content only once, but somehow refresh the page using a different stylesheet when tilting the phone to the left or right to reduce the amount of markup?
April 2nd, 2009 at 8:38 am
Will Says:

The best way of doing that would be with javascript and ajax.
If you look at the functions at the moment, you could add in some extra code and very quickly get jquery to load in external content. Check out docs.jquery.com and look for the load function. That will get you going in the right direction.
April 2nd, 2009 at 8:43 am
syncbox Says:

Does anyone have links to methods for slideshows to replace something like a SlideshowPro (flash) based element on a website? I tried a simple jquery+css based slideshow but it’s slow as a dog — though it at least displays.

Any solution to NO FLASH on iPhone?

Also, what’s the best iPhone emulator to use? I’ve tried a few and they actually DO show flash where I know that the iPhones I’ve tried DO NOT.
April 8th, 2009 at 10:35 pm
Steve Says:

are you available to do custom work for my site? implementing this capability into multiple places of godfuel website
April 28th, 2009 at 12:36 pm
Fiona Says:

Hi,

How to deploy the code in iphone? Its same like website design..where you put ur code under c:/inetpub/wwwroot/? I am unable to undersatnd how to deploy and wat folder the code shud be in…

any input is highly appreciated…

reply soon…thanks
April 28th, 2009 at 2:44 pm
tolucophoto Says:

My site is a photography portfolio.
Is there any script to stop people saving the images with touch and hold?

Also, is there anyway to control what touch and hold does? For example, could i have information about the photo show up instead of ‘save image’?
If not, do you know any script that can make an info box appear over the site when something is pressed (eg. like the low battery box)

thanks

toluco.co.uk
May 4th, 2009 at 5:36 pm
Brandon Says:

my site succesfully forwards iphone to the iphone enabled site…. but what if they want to view the desktop version? how can i impliment a “desktop” mode link that will take them to the original page with out re-forwarding them to the iphone enabled page?
May 13th, 2009 at 6:05 pm
Jason Minor Says:

I don’t know if this question has been asked so I’m sorry if I’m repeating information. I am not specifically building my website for the iphone, however when I view the site on my iphone the background image is scaled down and breaks the look of the site.

Can anyone tell me why this is happening and let me know if there is a way to make the site render on the iphone in the same manner it does on a PC??

thanks any help is appreciated
June 2nd, 2009 at 2:54 am
mixle Says:

Hey Will,

This got me really excited about iphone web dev. Thanks a lot. I’ve already started coding up a fun soccer substitute app for coaches that shows different data depending on the orientation.

Cheers,
mixle
June 6th, 2009 at 8:25 am
Chad Says:

Thanks so much for this. You have a great gift for explaining things!
July 15th, 2009 at 12:46 am
Abacus Says:

Nice article and I’m trying to get my head round it but I am not a programming person. One thing baffles me and that is where the “Oh, and I completely forgot!” piece of script goes?
July 15th, 2009 at 3:45 pm
Will Says:

Hi Abacus,
That is meant to go in the head between some tags on any page where you want people with mobiles to be redirected from. For example, the home page of your main website.

However! I found this just the other day:

http://detectmobilebrowsers.mobi/

It is a far more robust method. I’d suggest using that instead now.
July 15th, 2009 at 3:59 pm
BoomBox-Creations Says:

I have one question. Ok im making my site iPhone compatible with Dashcode.

Now its all set, and when i simulate it, it works fine in portrait then when i simulate a rotation, everything stays the same size, just moves to the left of the screen simulator.

Now my question is, i have made several other images that fit into the landscape view also, how will i set those images to be either portrait specific, or landscape specific mode with CSS?

Thanks, all help appreciated
July 22nd, 2009 at 8:48 am
ITCard Says:

First off – hands down THE BEST tutorial I personally have read concerning this topic. Second, curios as to whether there is a page loading script that can contain information that proceeds the intended website. Thank you for your help!
July 29th, 2009 at 9:27 pm
Greg Says:

Works like magic. Thanks a million!
July 30th, 2009 at 3:37 am
Will Says:

@BoomBox
I’m not entirely sure what you mean, do you have 2 different images, one for landscape and one for portrait? Or you just want to size them differently?

Either way, you’ve got the main container class/id to play with so you can just have something like:

#landscape img{
width: 200px;
}

#portrait img{
width: 100px;
}

The height will be scaled automagically.

@ITcard: There will be scripts like that arround, just remember that the iPhone does have limited memory, so if you’re trying to preload a lot of images, you might cause a bit of a slowdown. If you are worried about slow load times, you could give jquery’s lazyload plugin a try. It loads images as you scroll them into view. Quite useful when there are a lot of images involved.
July 30th, 2009 at 8:30 am
ITCard Says:

Will, thanks for the suggestion. One more question…why is it that when I zoom in on content using the 2 finger split method, can I not pan left/right to view the rest of the content? Is there a piece of code that restricts this? I have tried setting different dimensions for both landscape/portrait and even the initial and max scale widths. Any solutions?
July 31st, 2009 at 1:37 pm
Will Says:

Yea, there are a few bits of code I’ve used. I didn’t want people to be able to zoom as I wanted to give it more of an application feel. The iphone also resizes text to fit the width of the screen when you turn the phone landscape.

-webkit-text-size-adjust: none;
This bit stops safari deciding what text size to use. For example; if you make a really basic page, in landscape the text will be one size, rotate the phone and it will become larger. I’ve no idea why anyone thought this was a good idea, but regardless, that line will fix that.

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
This bit of code sets up the viewport. The initial width is 320, I’ve not tested it too much, but perhaps your content is wider than the iPhone is being told with this line. Or something is set to overflow hidden…
The rest is simply because I didn’t want zooming, so it’s disabled with those last three settings.

Those are the only things I can think that might cause the problem you’ve described…
July 31st, 2009 at 2:11 pm
ITCard Says:

Very good, I will try that. Thanks for everything
July 31st, 2009 at 2:52 pm
Ritesh S Says:

Read on to know more:
http://website-engineering.blogspot.com/2009/07/stop-adjusting-text-size-in-iphone-when.html
August 4th, 2009 at 8:58 am
NiCc Says:

Dave forgot the important thing for his redirection code: opening and closing javascript

if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1)) {
document.location = “http://m.fastrecipes.co.cc”;
}
August 5th, 2009 at 2:35 am
ITCard Says:

Quick question…I purchased a domain name and have it hosted where my other sites are hosted. When I type in the URL of my web address, the iPhone/iPod displays the entire URL path instead of just the domain name. Is there any way to display only URL?

Ex: domain name is ttpromos.com

Diplay reads: http://www.hostname/indexfile/iphonefiles/indexfile

Any suggestions would be greatly appreciated!
August 10th, 2009 at 5:19 pm
ITCard Says:

Disregard the last post…got it figured out. Thanks!
August 10th, 2009 at 5:42 pm
Mike Says:

Hello Will!

First off, wonderful tutorial! it was very informative and one of the only tutorials for building an iPhone site that is available.

I had one quick question that I was hoping you could help me out with… I made a iPhone version of my website “www.greenwellgraphics.com and when accessed it works and all the image buttons i made show up! one issue, the links to other pages do not work. I made a test link to the portfolio page which was put into the iPhone folder and named portfolio.html. so the link i used was “www.greenwellgraphics.com/iPhone/portfolio.html.

What do you think im doing wrong here?
Thank you!
-Mike
August 24th, 2009 at 7:36 am
Will Says:

I’ve just taken a look at your site. I can’t see anything that would stop those links from working, they do on my computer. The only thing that came to mind was that your file names are case sensitive and perhaps you weren’t linking to them correctly, but it seems to be working now so I assume you sorted it out.
August 24th, 2009 at 8:17 am
Mike H Says:

There is one serious flaw with this code which manifests itself in mobile WebKit, affecting both Android and the iPhone from what I’ve seen. It seems that when the page is cached, WebKit does not execute the page onLoad for performance, I’m guessing. For example:

1. Load the page in portrait
2. Navigate to another page
3. Change orientation to landscape
4. Use the browser’s back button to return to the previous page (don’t use a link)
5. The previous page, held landscape, reports that it’s still being held portrait. Whoops!

The solution seems to be to use a setInterval to poll the orientation – not ideal, but it works. I also use window.onorientationchange to hook the changing, as it’s cleaner than using explicity HTML. Similarly, I set a class on the body tag instead of relying on a cruft element (#page-wrapper). Here’s the head of the mobile WebKit-specific code:

window.addEventListener(“load”, function() { setTimeout(webkitBodyLoaded, 100) }, false);
window.onorientationchange = webkitUpdateOrientation;
setInterval(webkitUpdateOrientation, 500);

One other tweak I made just in case was to check the class before setting it – if it’s the same as what is to be set, it ignores the set command. Juuust in case.

Hope that helps!
August 26th, 2009 at 7:49 am
Will Says:

Hi Mike,
Thanks for that, looks like a good improvement.

We are planning to move this tutorial more permanently over into our labs section and re-write it with more up-to-date code, so this will make it in there I would think.

Cheers,
Will
August 26th, 2009 at 8:27 am
Geoff Says:

Your tutorial is great, but when I uploaded the files to a server for testing, the safari menu bar does not hide (i’m running OS 3.0), am i missing something? I have not altered any code whatsoever.
September 8th, 2009 at 10:29 pm
Fiona Says:

Hi Will,

I am also building a website in the iphone, the problem is with orientation. In the below tag I have used width=device-width. I have created a basic login and password with the table in .net. When I compiled and saw the website in iphone, orientation doesnt look good. If its Portrait, its going beyond the width, like I need to drag ,usually for height we dont need to set the value as we can keep moving downwards. But for width it has to be fixed right? same with landscape. I tried width = 320 but still prob with orientation for portrait and landscape. I would really appreciate if you give some input.

// this is in master.template

This is aspx page. // its in content place holder

Username

Password

Please let me know where I am getting problem with orientation.

Thanks
September 14th, 2009 at 5:07 pm
Ryan Says:

I cant do this! iT’S TOO CONFUSING! Why dont someone make a website designer where you can just drag things to places?! What about for us? the people that arent so good at codes?
September 25th, 2009 at 1:41 am
Matthew Says:

Ryan,

People like you are the reason web-designers have jobs. So, what about you, “the people that aren’t so good at codes?” Hire a web-designer, same as you’d hire a plumber or an electrician to work on your home because you’re not good at pipes or wires, or an auto mechanic to work on your car because you’re not good at engines.
September 25th, 2009 at 2:40 am
Chris Says:

I agree with Matthew.

Ryan, things have gotten vastly easier over the years when it comes to building sites and programming. There is also a vast amount of generous folks out there who work very hard and spend the time, money and energy to learn their trade who then create tutorials such as this one to make it even that much easier for people like you and I to learn for free.

I for one am very grateful for the knowledge I have due to people like will and the other readers who contribute. Thank you!!!!!!!

Be grateful for what you can learn and know when its time to bring in the big guns to get the job done at the level you wish you could.

Just my 2 cents worth…
September 27th, 2009 at 6:08 am
Simon Says:

Hi – great code – thanks.

Any idea how to use javascript to enable people to view the regular site on their iPhone should they choose to do so?
September 27th, 2009 at 5:11 pm
Simon Says:

Update – this does the job:

if ( window.location.href.indexOf(“noiphone”) == -1 ){
if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1)) {
document.location = “http://www.engageinteractive.co.uk/iphone/”;
}
}

Then on your iPhone pages put something like:

View Regular Site

Hope ths helps.
September 27th, 2009 at 6:40 pm
Fiona Says:

Can anyone tell me about the orientation, I am getting horizontal scroll, where we shud have fixed width(no scrolling horizontal)…somehow my contents are not fixed when i change from landscape to portrait view. please help anyone…I would really appreciate..thanks!
September 28th, 2009 at 2:53 pm
studio-Cs Says:

Great sharing! A quick start on developing website for iphone.
Thanks.
September 29th, 2009 at 8:03 am
Fiona Says:

Hi Will,

Please answer to my question…Thanks
October 1st, 2009 at 5:16 pm
Will Says:

Hi Fiona,
I’m sorry, but I’m not sure what to suggest without seeing your code, could you post a link to it?
My only guess is that you haven’t set the -webkit-text-size-adjust: none; in the CSS.

This allows the phone to set the font size (and more I think) depending on orientation.

Other than that, you may be getting classes and id’s mixed up perhaps.

Sorry I couldn’t be more help.
Will
October 2nd, 2009 at 8:15 am
Fiona Says:

Thanks Will..Finally you replied. I have pasted the code in the above messages. My code is in asp.net with c#. But in asp.net it doesnt have OnOrientationchange which you mentioned the body tag. If you got any email id I can fwd my code to you. Please let me know.

Thanks for ur response.
October 7th, 2009 at 2:09 pm
Will Says:

Hi Fiona,
I’m sorry I took a while to reply, we have been quite busy here in the office.
Unfortunately though I’m afraid we can’t really support our tutorials to this extent. I’m happy to give a few tips here and there, but email support would take quite up a bit too much time.
Good luck though,
Will
October 7th, 2009 at 2:18 pm
Noah Shrader Says:

Love this tutorial. I implemented it on my website at http://www.webdesignersknoxville.com. Check it out on your phone.
October 17th, 2009 at 4:13 am
manju Says:

I have a html template with links that i embed while sending email. The links doesnt seem to work on iphone. I was not able to navigate to the url when i click on the link. Do i need to add some additional code to make it work on smart phones?

Please do reply.
October 28th, 2009 at 7:35 pm
manju Says:

I have a html template with links that i embed while sending email. The links doesnt seem to work on iphone. I was not able to navigate to the url when i click on the link. Do i need to add some additional code to make it work on smart phones?
October 28th, 2009 at 7:47 pm
Angela Garza Says:

Hi, is there a code that I can put on my iPhone site that stop the horizontal orientation. I want my site only vertical so when I flip my phone stays on vertical position???
November 3rd, 2009 at 8:33 pm
r4 Says:

Thanks for tutorial. I’ll try this code to build a website for my new iphone. I want to creat a website for the academic purpose.
November 6th, 2009 at 5:23 am
Kevin Zurawel Says:

Wow, I learn something new about mobile web development every day. I’m very interested to try out this technique with a mobile site I’ve been working on. Thanks!
November 8th, 2009 at 3:12 am
manoj Says:

hi!! will

thanks or tutorial..

as a developer what sort of things i have to focused about to make iphone enabled site….

not in designing par t in php coding part…….in my web site i want user login,user registration,product showing,profile updating,and log out things…………please help me out….
November 13th, 2009 at 7:40 am
Fredrik Says:

Love your tutorial! Realy helped me!
November 19th, 2009 at 7:41 am
John Says:

I am building an app with tabs. One of the tabs has a browser that seems to work fine with all content (view rotates, etc.), but it always reports ‘You are now holding your phone upright’ . Is there a problem loading your page with tabs? I’m using the latest 3.1.2 build of XCode. Any help would be appreciated… Thanks
November 20th, 2009 at 8:19 pm
Anne Says:

Will, I love the idea of having a special small website alternative for iphone users. I especially love the idea of the content changing automatically when you reorient the phone. I can see these working well for getting out the basic information needed about missing persons.

Within the content parameters, do you have to do something special to insert an image instead of the text examples? I can’t get it to work.

Right now, as I’m working through this I simply put an example up telling users to click and re-orient their phone.
http://www.rachelfind.com/iphone

In addition 320×480 seems too big? Are there more than one size of iphone screens? If so, what is the smallest/largest?

Thanks for any info you have.
December 4th, 2009 at 3:18 pm
Anne Says:

Never mind. I must have made a typo before that caused it not to work. I tried just copying the code instead and then it worked fine.
December 8th, 2009 at 8:07 am
Jim Says:

How would I start the youtube app palying a specific file from within my iphone web site?
December 9th, 2009 at 11:31 am
Anne Says:

This message is for Jim. The only way I could get youtube and sound links to work is by putting a regular url link. See http://www.rachelfind.com/iphone. the links are above and below the pic of rachel playing guitar. Still making changes. What happens is the youtube player or media player shows when you click. I wanted to make background sound play once automatically, but could never figure it out.
December 13th, 2009 at 6:57 pm
vagkavan Says:

Is it possible to have a menu bar (navigation bar) on a web site that is independent of iPhone’s zoom (i.e. with fixed width and height) while the rest of the site can be zoomed in and out?

With meta “viewport” I can set the zoom of the whole website, but I want to exclude some parts. It also seems that it can’t be done by using iFrames or CSS transforms. Is it possible to be done by tracking Gestures that scale elements, and using javascript to rescale my menu?
December 17th, 2009 at 5:41 pm
fjpoblam Says:

Just tapping in to say thanks. I’ll propagate parts of this across six client websites within the next two days. Won’t steal all yer code, though. Thanks again.
January 2nd, 2010 at 12:19 am
Russ Says:

Hi,

I’m working on a website-based flash card system for iPhone, and for the sake of the flow of the system it would be preferable to:

1) Have everything fit on one screen (Portrait mode)

2) Because of this, do not allow the user to switch to a landscape mode.

I’ve done quite a bit of searching but haven’t come up with anything yet. Does anyone know of a way to “lock” the orientation in portrait?

http://depts.washington.edu/llc/external/flashcard/Flashcard_Mobile_Russian.php

Thanks!
January 5th, 2010 at 8:24 pm
will Says:

I don’t know of anything like this off the top of my head. Check out the apple developer pages, there might be something you can stick in the meta.

Alternatively, you could use this tutorial code to just show a simple message. “Please return to portrait view.”

Not ideal, but gets the job done until you find a better solution.
January 6th, 2010 at 9:33 am
neil Says:

Thank you for giving me the golden ticket of code
“-webkit-text-size-adjust:none;”

This is the only site that has it, and it fixed my problem that I spent days working on. It’s so simple and effective too!
January 8th, 2010 at 3:47 am
Thorsten Says:

For me (using a new ipod touch with latest OS) the safari menu bar does not hide – nothing is scrolling to the named element. I tried your demo-site.

Any ideas??
January 11th, 2010 at 4:51 pm
Will Says:

It’s working here on the iPhone 3g with latest OS…
Maybe an update on the touch has caused an issue, but we can’t really test. Let us know if you find a solution.
January 11th, 2010 at 4:58 pm
shannon Says:

Just want to say thanks for the tutorial!
January 15th, 2010 at 11:27 am
slyistheman Says:

Hi there

Everything is fine but one problem.. when I turn the Iphone to the right it doesn’t display nothing
unless I click refresh then it displays. if I turn to the normal mode it’s fine but when I turn to the right again it doesn’t display nothing.. I have to click refresh once again..

How can I fix that..
January 24th, 2010 at 4:38 pm
slyistheman Says:

Hi there. nevermind I fixed it.. everything is good
January 24th, 2010 at 4:55 pm
MediaNovak.com Says:

Hey thnx for the post, it really helped us a lot! here is the last mobile site we’ve done:

http://www.art-studio.tv/mobile
February 4th, 2010 at 9:46 am
anu Says:

Hi,

This is an amzing article. It answered a lot of my queries.
There’s another issue I ma having with my website and hoping to find an answer here.
I have a website in .NET code. It has a search box and a search button. when the user taps into the search box the iphone virtual keyboard shows up. If the user taps the search button on the keyboard he is logged out of the app. I am using usersession in my search function.

Is there a way to integrate the iphone search button with the search button on my app?
please help!!
February 18th, 2010 at 6:48 pm
anu Says:

Hi,

An update to my earlier post.
I had a logoff button on my page.
The user was getting logged off because the virtual keyboard search button was picking the Logoff button as the default button.

How can i make the submit button as my default button?
February 18th, 2010 at 10:25 pm
Will Says:

Hi Anu,
Are the buttons in seperate forms & fieldsets?
That would be my best guess…
Next guess: Have you set a tab-index?
Hope that solves it,
Cheers,
Will
February 19th, 2010 at 9:35 am
iDea Digital Says:

Thank’s so much!
February 23rd, 2010 at 3:33 am
Karram Says:

I really appreciate your post, I have got a lot more info after reading this tutorial.
March 4th, 2010 at 8:12 am
Code( Says:

Hi, i just downloaded your tutorial. i havent modified it in anyway. i got your icon to come up. but why doesn’t the text in the paragraph tags show up?

Sorry, im a total n00b.
March 5th, 2010 at 1:57 am
Montana Burr Says:

You know, you could get away with just checking for the presence of “iPhone” in the User-Agent string, since the iPod touch UA string states that it is compatible with iPhone.
March 5th, 2010 at 7:28 pm
Jacob Says:

The code that was supposed to send my iPhone to the iPhone page didn’t work in , , , or just out in the open. It just showed up as text.
March 26th, 2010 at 8:12 pm
tr3 Says:

Hi Will,
I’m trying to port my portfolio website to an iPhone app and have had pretty good success up until now. Your tutorial is great, and works perfect.

My problem is, I’m using the script to load div’s with images embedded dependant on the orientation ( 300 x 115 for portrait, 460 x 175 for landscape ) and it only works for the first instance of my images. Everything past the first instance of page_wrapper is blank. I’ve tried adding document.getElementById(“page_wrapper2″).setAttribute(“class”, contentType); , etc. but it still doesn’t work. Is there any way to modify the javascript or any aspect of this so that I can have it apply to multiple versions of page_wrapper[1,2,3,4,...]?

Please let me know. You can contact me by email if you want.

Thanks again,

Tre
March 26th, 2010 at 11:11 pm
Michael Says:

I have found this site helpful for learning how to build an iPhone web site.

http://www.combsconsulting.com/iphone-android-website-example/

This is also a page on how to build an iPad website too.
http://www.combsconsulting.com/ipad-website-example/
March 29th, 2010 at 2:32 am
Joel Says:

Thanks for a great script! It is working very good, except for one thing, I need to change the orientation of the iphone once before the content shows up, i.e. if I have the phone upright and loads my site, it’s blank. If I then put it sideways, the site shows up and if I put it upright again the site is loaded and vice versa.

I figure it has something to do with my site not getting the current orientation at load. Do you have a solution?

http://www.jchristoffersson.com

the script:

window.onLoad=function initialLoad() {
updateOrientation();
}

function updateOrientation(){
var contentType = “show_”;
switch(window.orientation){
case 0:
contentType += “upright”;
break;

case -90:
contentType += “flip”;
break;

case 90:
contentType += “flip”;
break;
}

document.getElementById(“wrapper”).setAttribute(“class”, contentType);
}
April 5th, 2010 at 11:09 am
Dipayan Mallick Says:

Hi,
Thanks for your great tutorial. But I have one problem that, although I have created my iphone version of my website by creating a .htaccess to force iphone visitor to /iphone directory, but I dont know how to enable normal site looks on ipone browser if user wishes to view. Like from the iphone directory if user wants the original home page look of the site instead of the iphone version homepage. Can you please guide me?

Thanks in advance.

Dipayan
April 9th, 2010 at 1:46 pm
peter chon Says:

Now that we have the ipad (with it’s larger dimensions) can we specifically leave out the ipad from re-directing to the smaller site?
April 12th, 2010 at 6:36 pm
MikeV2 Says:

I didn’t have an iphone for testing, so needed to work with this so I had to make it visible in a standard browser. NOTE: this may well look different on an iphone, than in a standard browser, but it gave me something to work with.

Just in case somebody wants the page to display if someone was visiting it from a non-iphone make the following tiny change to the orientation function…

function updateOrientation(){
var contentType = “show_”;
switch(window.orientation){
case 0:
contentType += “normal”;
break;

case -90:
contentType += “right”;
break;

case 90:
contentType += “left”;
break;

case 180:
contentType += “flipped”;
break;

default:
contentType += “normal”;
break;
}
document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);
}
April 16th, 2010 at 10:19 am
Lesya Says:

Thanks! This blog helped me a lot!
April 20th, 2010 at 12:29 pm
Sharif khan Says:

Excillent post. I got this from google search. Thanks a lot.
April 22nd, 2010 at 7:20 am
breat Says:

Very useful tutorial for website creating.
I like it.
Thanks for great sharing.
April 28th, 2010 at 11:28 am
Bruce Sommer Says:

Great post thanks, used your code to create a “sample” for a prospect with log-in required to test database connectivity and basic features. I tested on an Android and works as well. Any pointers on accessing the shake features and GPS? I suspect any handset with an accelerometer should use similar detection schema… I’ll shoot a note off to inquire regarding collaboration and more details.

Thanks again!
April 29th, 2010 at 6:21 am
Matt Says:

Hey

Trying to build this mobile website for a charity, and I’m sure I’m missing something obvious but it’s not displaying at all, just getting a blank screen! Just want it to zoom when orientated sideways, any help appreciated.

hosted here:
http://www.barecreative.co.uk/toughstuff/

Thanks!
May 5th, 2010 at 3:20 pm
Will Says:

Looks like your orientation.js isn’t linked up properly Matt.
That might help
May 5th, 2010 at 3:22 pm
Matt Says:

thanks for the quick response!
May 5th, 2010 at 3:50 pm
Matt Says:

One more question if it’s alright, when tilted sideways the phone seems to still have a limit of 320px, as I’m trying to float the sidebar right and it doesn’t seem to want to go there, any ideas?
http://www.barecreative.co.uk/toughstuff/

Thanks again!
May 5th, 2010 at 4:19 pm
MikeV2 Says:

In your CSS it looks like you’re stating the width of #page_wrapper as 320px. That doesn’t change when you rotate the phone, so I’d guess that’s where your problem’s coming from.
May 5th, 2010 at 4:27 pm
Will Says:

Hi Matt,
Taking a quick look at your code, and the site, I’m actually thinking that using the orientation detection isn’t really that necessary. Like Mike mentions, the width of your page_wrapper seems to be issue though.

The way you have things organised at the moment with the triplication of all your content is a messy.

My suggestion would be to simply let the iPhone do it’s thing in this case. Float those icons right and leave the content on the left flexible so that it will fill the remaining space. Keep the text size adjust line in the css to stop the fonts jumping about.

If you wanted to have the orientation change something, perhaps set the width of the icon container to double that of the icons and set them to display inline when the phone is held on it’s side. This will stop people having to scroll as you’ll have rows of two.

Cheers,
Will
May 5th, 2010 at 4:31 pm
Matt Says:

It is indeed, thank you very much!
May 5th, 2010 at 4:34 pm
Matt Says:

Hi Will

I didn’t think it was either, but I was having some problems when clicking a link and rotating the phone, then returning using the back button, which didnt update the orientation, and caused a big whitespace when held horizontally. This could be zoomed out to see the portrait version aligned left. This wasn’t an issue as long as the links weren’t used though. Is there a fix for that?

Thanks
May 5th, 2010 at 4:49 pm
Victor Reyes Says:

So if I got right, there are 4 containers for iphones 4 different sides. Does this mean that every container (div) contains exactly the same information that is styled differently? Isnt that bad from SEO point of view, dublication the content or might be seen as spam, etc?
May 23rd, 2010 at 9:35 pm
Eric Evenson Says:

Thank you so much for the tutorial…it is awesome! I have one quick question. I have an image at the top that is 320px wide in normal view. When I turn my iPhone right or left the image stays fixed at 320px. How do I get it to show the same image, but has a size that goes to 480px?
May 24th, 2010 at 2:20 am
Victor Reyes Says:

I guess ull have to re-do the image to 480 px and place it in and/or containers
May 24th, 2010 at 6:18 am
Victor Reyes Says:

Sorry i wrote some html but id didnt showed up = content_left and content_right divs
May 24th, 2010 at 6:22 am
Eric Evenson Says:

Thanks Victor for the help! I was able to figure it out. Maybe not the best way, but I definitely am able to get the image in the header to spread out when I turn it left or right…thanks again!
May 24th, 2010 at 1:15 pm
Hadley Says:

Question, if I may. I really appreciate this website for sharing this knowledge. Thus far it has helped me considerably with my iphone project. I do have one question – please see the following link and you can see the page “sizes” properly. However, when viewing a page that exceeds the height of the iphone screen size – one cannot scroll down…. Is there a specific code I would need for this feature? Sorry if I overlooked it in the materials. http://www.swiftreport.net/m/
Thanks!
May 28th, 2010 at 11:08 pm
jan Says:

any ideas how to add support for opera? i guess that requires an extra jscript
May 29th, 2010 at 2:10 pm
Centrio Says:

Is that also supported on Nokia E-Series?

_ _ _ _ _
Tomy
Centriohost – Cheap Master Reseller Hosting / Reseller Hosting / Alpha Master Reseller Hosting
May 29th, 2010 at 8:26 pm
gehang Says:

Anyone know how to set focus to a control after a page is loaded on the iphone?

Normally I would use javascript (form.element.focus();

I’ve tried it in the head, in the body tag, and in a script tag in the body. The control never seems to get the focus. I would like to load a web page, then bring up the keyboard for input without the user having to click the textbox first.

Anyone have an idea?
June 5th, 2010 at 2:40 pm
Chris Says:

Thank you so very much for a very useful tutorial!

The new iPhone 4 was just released, and, of course, it has a much higher screen resolution. Is there a way to detect which screen the user has, and re-create the content accordingly?

I have an image heavy site (I’m a photographer and need to show some samples), and it would be nice to be able to present the images larger than the old 320px wide if the user’s screen allows for it!
June 10th, 2010 at 3:27 pm
Duc Says:

I am a novice to css. I have been learning html/css on the net. However, I have not done a site for iPhone. Thanks for the tutorial. I will start making a site in for the iPhone for training purposes.
June 13th, 2010 at 12:42 pm
Heathcliff Says:

Great tutorial!

But I was wondering if I could use the exact same javascript to control a variable that would change an include to actually change the page that is shown when changing the iPhone direction…
(I mean when using php and not xHTML)
June 22nd, 2010 at 9:41 pm
Saurabh Says:

good post…since the css has used absolute width, it will not work on iPad
can anyone make the code compatible with iPad also?
July 7th, 2010 at 3:26 am
Manish Says:

This is awsome. I tried on my iPad and works great and since the iPad in addition to the other angles of iPhone also allows flip mode (Vertically upside down), i tried it and IT WORKS!!!!
July 8th, 2010 at 10:01 am
pixeleffect Says:

Hi one thing i noticed was not said in this tutorial was the iPhone screen size in pixels is 480H by 320W i know some websites say 940 by 620 or something those are completely wrong.

this is mainly for the ones who are using adobe fireworks or photoshop

just to notify everyone hope this helps.
July 12th, 2010 at 9:28 pm
pixeleffect Says:

hi one thing i forgot to ask was do you know the code so that when you type in the regular desktop website ont he iphone it takes you directly to the iphone website instead of having to click the link to get to the mobile site
July 12th, 2010 at 9:34 pm
James Says:

Does that set the width to 320 or 480 regardless of the width of the site? i have tried a few different examples and seem to get different results, can anyone let me know?

Cheers
July 21st, 2010 at 12:02 pm
James Says:

sorry last message got rid of code

meta name=”viewport” content=”width=device-width”

Does that set the width to 320 or 480 regardless of the width of the site? i have tried a few different examples and seem to get different results, can anyone let me know?

For example if i had a site with a fixed pixel width of 700px would it force it to fit or would it only show 320/480?

Cheers
July 21st, 2010 at 12:05 pm
Adam Says:

no the width must always stay at 320px. the iphone does not automaticly format the site to fit the screen.. you can have the width set to 700px but you will have 370px of excess on your page.
July 21st, 2010 at 3:13 pm
Izaak Says:

Hi,
First of all, great tutorial, just a quick question though.

How can I make it scroll if I have alot of content? Mine just sits there and doesn’t show all of it.
July 22nd, 2010 at 10:31 am
InomoEscows Says:

The Rise Of The Organization A man gave the route of [B]ed hardy clothing[/B] range his very own name. Later on he joined by [B]ed hardy hoodies[/B] Producing clones for other brand name names like Urban Outfitter, Von Dutch and Diesel was his previously operating. He find out a fine possibility in [B][URL=http://www.edhardystore.uk.com]ed hardy hoodies[/URL][/B] masterpieces. He talked such tricky within the yr 2004 having a considering foe a clothes layout dependent on his outstanding art and tattoo [B][URL=http://www.edhardystore.uk.com]christian audigier[/URL][/B] Quickly following that speak, Hardy [B]ed hardy hoodies[/B] an authorization to make use of his very own styles and from then on, the Ed Hardy garments was born.

Together using the success of [B][URL=http://www.edhardystore.uk.com]ed hardy clothes[/URL][/B] outfits stytle you will find troubles linked with them. [B]ed hardy hoodies[/B] excellent outcomes of [B]ed hardy clothing[/B] clothes collection is due to Christian Audigier’s distinctive marketing designs, you will discover so several who argue this. Audigier very own very a few [B][URL=http://www.edhardystore.uk.com]ed hardy t shirts[/URL][/B] buddies and he hold them. [B][URL=http://www.edhardystore.uk.com]christian audigier[/URL][/B] just provides his close friends no price goods and take pictures from them wearing his types rather than spending so a lot of quantities of dollars for your style who will [B][URL=http://www.edhardystore.uk.com]ed hardy clothes[/URL][/B] the clothes collection.
July 27th, 2010 at 4:30 am
Martyn Says:

With the new iPhone having a larger resolution, how do we combat the resolution differences?
July 27th, 2010 at 11:39 am
Midhun Says:

I don’t have any idea how to work with CSS. My requirement is to change design of existing mobile application into rich design of iPhone.
July 28th, 2010 at 1:23 pm
Pixeleffect Says:

hey, midhun

dreamweaver is made sothat you do not need to to any css(well if you really wanted to customize) if you can afford this then you will have to learn css. My knowledge of css came from looking at what dreamweaver spit out then i just learned like that

if you aew a student then adobe gives students up to 80% off all adobe products just go to adobe.com and search student

hope this helps,
Pixeleffect
July 28th, 2010 at 2:32 pm
Eric Evenson Says:

Tutorial was awesome and have most things figured out. One thing that I am struggling with is having a table. I am working on a movie website and trying to display two movie posters with the names of the movies underneath them. This is pulled from a MySQL database and this process works fine. The problem is when I hold the iPod touch vertically, it looks good. When I turn it right, it still looks fine, but when I turn it left, the movie posters get centered in the screen and the names of the movies are generally to the left of the image instead of the bottom. To see an example on an iPhone or iPod, go to http://www.essexcinemas.com/phone/comingsoon.php – any help in this matter would be greatly appreciated!

Eric
July 28th, 2010 at 11:37 pm
Martyn Says:

Just thought I’d share the website I made using this tutorial for my university project.

I made a user controlled radio station, the playout system was the difficult half but the iPhone website was a big hit!

http://www.martynlittlewood.com/iphone

Upright is information. Left tilt is music voting, Right tilt is topics voting.

It won “Best In show 2010″ thanks!
July 29th, 2010 at 12:26 am
sesen Says:

i’m a new iphone 。。websize developer。I hava an problem , how to make the text show on the center of iphone screen,(the pictures has already center on the screan,i don’t know how to make text align center the screen by css)
July 29th, 2010 at 8:51 am
Pixeleffect Says:

ok witth css iam guessing ur using html to center you text go make a div tag for your text and enter all the text u want the size put the size of the div tage so it stays within the screen or whatever u want to do then go and type padding-left: auto; then enter padding-right: auto; and that div tag will center itself inside the parent div tag.
July 29th, 2010 at 5:58 pm
Pixeleffect Says:

i forgot to say that u need a parent div the width of the iphone and to push ur website to the corner click in the first div tage on the page and put in a new css rule call it body set the pading to 0 on all sides heres the css code for body if u are not using dreamweaver:

padding-top: 0Px;
padding-bottom: 0Px;
padding-left: 0Px;
padding-right: 0Px;

hope this helps
pixel effect
July 29th, 2010 at 6:04 pm
sesen Says:

thanks Pixeleffect
thanks for your help ，but i don’t know how to get the width of the iphone, so ,although i did a job as you said above ,it still can’t work; the text still can’t show on center of the iphone,but it center when use other phone,likes anycall / nokia and so on!!
August 2nd, 2010 at 1:47 am
Jobs In Manchester Says:

Brilliant post. Extremely useful for anyone designing a mobile site with orientation and lets face it if you’re building a mobile site these days orientation is a must. Other phones are cottoning on too Android etc. Reece
August 5th, 2010 at 9:04 am
Pixeleffect Says:

Hmm… thats weird it should work i use it all the time for regular websites to center the whole div on the page maybe someone else could help at least i tried
August 5th, 2010 at 3:31 pm
Pixeleffect Says:

the width of the iphone btw is 320px exactly
August 5th, 2010 at 3:35 pm
leslie Says:

well i tryed your code on http://brewscape.com/ipod today and it didnt work im using 2ed gen ipod with iOS 4.0.2
August 15th, 2010 at 11:00 pm
Bruce Says:

you guys Rock, great article! Do you know of anyway to listen for an iPhone (or any mobilephone with accelerometer) shake event with javascript? i want to have a shake event to be the same as a next button tap…I don’t wantot build an app the user has to download…
August 17th, 2010 at 6:36 pm
Will Says:

I don’t think it’s possible sorry…

I did think of a way, involving text inputs and that shake to undo thing that the iPhone does, but there are so many issues that I just don’t think that can be overcome.

All that said, I’d actually advise against the idea of shake to go next. That’s against all the iPhones current conventions. Swipe left or right is next or previous. Shake is generally something like undo, or start again, or return to the homescreen. People don’t like to have to learn new things.
August 18th, 2010 at 8:21 am
Ankinanti Says:

just what i’ve been looking for..

will studying it later..meanwhile,bookmarked..
August 18th, 2010 at 8:51 am
Atul Bhalerao Says:

wow i like it
August 27th, 2010 at 6:01 am
Ghansham Gagnani Says:

Thanks for great resources for web development community.
September 1st, 2010 at 7:42 am

Engage Interactive Blog

Tutorial: Building a website for the iPhone…written by Will and has 230 comments so far

Setting up your page

Laying out the content

Onto the CSS

The complicated CSS

The grand finale: Orientation Detection (and another useful trick)

Source files

Things to remember

Useful resources

Oh, and I completely forgot!

Vinci Says:

MEL Says:

Mohd Heidzir Says:

Eugene Gordin Says:

Eugene Gordin Says:

Will Says:

andrea Says:

Will Says:

CT Says:

Rob Blakeney Says:

Guisella Says:

Will Says:

Chuck Says:

Robert Says:

Will Says:

Robert Says:

Will Says:

Robert Says:

Chuck Says:

Ryan Bollenbach Says:

julianrobt Says:

julianrobt Says:

jen Says:

Will Says:

Kylie Cooper Says:

Aman Patel Says:

nana Says:

nana Says:

Will Says:

nana Says:

kyle Says:

Chad Says:

Will Says:

Amar c Says:

Barbara Says:

Barbara Says:

theturninggate Says:

Will Says:

theturninggate Says:

Hunter Says:

Will Says:

Jon Says:

Will Says:

Lion King Says:

Rob Says:

Tenaya Says:

Will Says:

Jaz Says:

theturninggate Says:

Liz Says:

iTod Says:

daddy design Says:

Alex Says:

Will Says:

syncbox Says:

Steve Says:

Fiona Says:

tolucophoto Says:

Brandon Says:

Jason Minor Says:

mixle Says:

Chad Says:

Abacus Says:

Will Says:

BoomBox-Creations Says:

ITCard Says:

Greg Says:

Will Says:

ITCard Says:

Tutorial: Building a website for the iPhone
…written by Will and has 230 comments so far