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 154 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

Engage Interactive Blog

Tutorial: Building a website for the iPhone…written by Will and has 154 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 154 comments so far