Advertise Here

Learn How To Develop For The iPhone

James Black on Aug 18th 2008 with 78 comments
DiggThis

Today I’m going to show you how to build an alternate page and style sheet for the iPhone and iTouch. We will cover how to detect if the user is using an iPhone to view your page as well as the orientation of the device – whether it be landscape or portrait. To accomplish this we will be using javascript, and some Safari mobile specific CSS tags.

Getting Started

We’re going to start off with 2 psd’s I made and get those working in an iPhone page. I am using images for the background and header although you could use just straight colors instead of images. The plus side to not using images is that it obviously loads faster but also when switching between landscape and portrait the images take a moment to load, depending on how large they are. You can find the source psd files here or you can make your own. Something to keep in mind is that we are building a page specifically for the iPhone or iTouch. If you do not have the device yourself you can download the iPhone SDK freely from Apple and it includes an iPhone simulator. if you would like to detect the iPhone on your standard browser page and either load the iPhone css and html through conditional statements or send the user to a different page entirely, use the following code:

<script type="text/javascript">
var browser=navigator.userAgent.toLowerCase();
var users_browser = ((browser.indexOf('iPhone')!=-1);
if (users_browser)
{
	document.location.href='www.yourdomain.com/iphone_index.html';
}
</script>

The code above explained:

  • Line 2: Create a variable that holds the users type of browser ( among other things )
  • Line 3: Assign the browser type a value if the iPhone browser is present.
  • Line 4 – 8: An if statement that redirects the user to an “iPhone formated page” if the variable “users_browser” returns a value ( meaning the user is using an iPhone or iTouch to view the current page ).

Below the code will use html conditional statements to hide the code from a regular browser. 

	<!--#if expr="(${HTTP_USER_AGENT} = /iPhone/)"-->

	<!--
	place iPhone code in here
	-->

	<!--#else -->

	<!--
		place standard code to be used by non iphone browser.
	-->
	<!--#endif -->

Step 1: The HTML

So we now know how to point the user to your iPhone page if they are on an iPhone or iTouch device. Now, we will start working on the iPhone HTML page; the code below has some key differences from a regular XHTML transitional document.

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

		<title>My iPhone Page</title>

		<link rel="apple-touch-icon" href="images/myiphone_ico.png"/>
		<link rel="StyleSheet" href="css/iphone_portrait.css" type="text/css"  media="screen" id="orient_css">

The code above explained line by line:

  • Line 1 – 5: This is standard 1.0 XHTML Transitional Doctype. Nothing special yet.
  • Line 6: This line is iPhone and iTouch specific. It sets initial values for the viewport in the Device’s browser. width=device-width states the width of the page to be the same width of the device. initial-scale and maximum scale set the starting point for the zoom of the page, maximum-scale is how much the page cane be scaled up.
  • Line 9: This link element is pointing to the web pages icon. this is used when a user saves the page to their “Home Screen”.
  • Line 10: A link element points to the iPhone style sheet. This element has the id orient_css assigned to it. This is so that we can point to it with javascript to change the css file it points to when it comes to adjusting the layout for the orientation of the device.

Step 2: Laying Out The Divs

We now continue with the rest of the html before we add any javascript functions for orientation detection. Start with ending the head and then start the body. In the body element we add onorientationchange=orient();. So I just lied, that is a bit of javascript, but this is needed to call our “orient” function (we’ll go over this in a bit) when ever the device detects a different orientation. 


	</head>

	<body onorientationchange="orient();">

		<div id="wrap">
			<div id="header">
			</div>
			<div id="content">
			<p>This is the main content area of the page. </p>
			<p>Using css and javascript we can manipulate any of these divs using an alternate css file. The css files in this project are for landscape and portrait views.</p>
			<p>Some more filler text here to demonstrate the page.</p>
			</div>
			<div id="bottom">
			</div>
		</div>
	</body>
	</html>

Step 3: The Orientation Javascript

In the head of the page you will want to place the code seen below

		<script type="text/javascript">
		function orient()
		{
			switch(window.orientation){
					case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";
			        break;

					case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
				    break;

					case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
					break;

		}
	}
		window.onload = orient();

		</script>

switch(window.orientation) works off of the onorientationchange() method in the body element. This will check to see if the current rotation is equal to the “case value”, if it returns true it will execute what is after the colon. After an orientation has been matched it breaks out of orient();. window.onload() runs the orient function when the page first finishes loading.

After each case (value) : we have javascript pointing to the link elements id that our css file is attached to. Depending on the case value, 0, 90 or -90 ( there is also 180 but it is not supported on the iPhone at this time) the portrait or landscape css file is attached to the href tag in the link element. 0 is upright (portrait), 90 is landscape counter clockwise. -90 is landscape turned clockwise and 180 although not supported yet would represent the device being upside down.

Step 4: Implementing The CSS

Even with all of this code, the page doesn’t do much. That’s because we need to add background images and style it all. We will create 2 css files, one called iphone_portrait.css and another called iphone_landscape.css. We will place the portrait css file into the link element as the default css file to use. 


	body
	{
		background-color:#333;
		margin-top:-0px;
		margin-left:-0px;
	}

	#wrap
	{
		overflow:auto;
		width:320px;
		height:480px;

	}

	#header
	{
		background:url(../images/header.jpg);
		background-repeat:no-repeat;
		height:149px;

	}

	#content
	{
		background:url(../images/middle.jpg);
		background-repeat:repeat-y;
		margin-top:-5px;

	}

	p
	{
		margin:5px;
		padding-left:25px;
		width:270px;
		font-size:10px;
		font-family:arial,"san serif";
	}

	#bottom
	{
		background:url(../images/bottom_corners.jpg);
		background-repeat:no-repeat;
		height:31px;
		margin-top:-5px;
	}

The above code is for the iphone_portrait.css file and is rather straight forward. Some things to note are:

  • in the wrap style description overflow:auto makes sure floated items are kept inside the wrap div to keep the page nice and tidy.
  • the dimensions for the page are 320px wide by 480px tall. be sure to state this in the wrap div.

Below is the code to be placed inside the iphone_landscape.css file. the only differences between portrait and landscape css files are the background images, the wrap dimensions are reversed and the margins are adjusted accordingly.

	body
	{
		background-color:#333;
		margin-top:-0px;
		margin-left:-0px;
	}

	#wrap
	{
		overflow:auto;
		width:480px;
		height:320px;

	}

	#header
	{
		background:url(../images/l_header.jpg);
		background-repeat:no-repeat;
		height:120px;

	}

	#content
	{
		background:url(../images/l_middle.jpg);
		background-repeat:repeat-y;
		margin-top:-5px;

	}

	p
	{
		margin:5px;
		padding-left:25px;
		width:370px;
		font-size:10px;
		font-family:arial,"san serif";
	}

	#bottom
	{
		background:url(../images/l_bottom_corners.jpg);
		background-repeat:no-repeat;
		height:37px;
		margin-top:-5px;
	}

If you are using my sliced background images your page should now look like the image below when in portrait mode.

Or, in landscape mode?

Where To Go From Here?

So now that you have a page formatted and styled for the iPhone and iTouch, what else can you do? Well, if your page is meant to be more of a web app you may want to check out the IUI by Joe Hewitt which is a framework that makes your pages look like native iPhone or iTouch apps. Also keep in mind that you can set 3 specific css files; so you can have one css file that styles the page if its turned clockwise to landscape and a different file again for when its turned counter clockwise to landscape. This will allow for some interesting outcomes. Good luck!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

DiggThis
PG
By James Black

Rollover to read this author's bio or click through to see a full list of posts by this author.

James is a designer and developer based in Winnipeg, Canada. He has over three years experience with freelance work. Besides web development he has also worked on video and motion graphics projects for Target and Denting Sales. James' interests include game and software design and development, RC racing and Movies.  

Plus Premium

Premium Members

Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now

 
 

Related Posts

Add Comment

Discussion 78 Comments

Comment Page 3 of 3 1 2 3
  1. illastricz says:
    October 2, 2008 at 1:58 am

    srry this script:

    # <!–#if expr="(${HTTP_USER_AGENT} = /iPhone/)"–>
    #
    # <!–
    # place iPhone code in here
    # –>
    #
    # <!–#else –>
    #
    # <!–
    # place standard code to be used by non iphone browser.
    # –>
    # <!–#endif –>

    Reply
  2. iphone forum says:
    October 7, 2008 at 6:15 pm

    Got a question about the iPhone? Ask away. Think you can Answer any question about the iPhone?? Lets see. http://www.iPhoneAnswers.org

    Reply
  3. Anthony Hand says:
    October 21, 2008 at 4:24 pm

    Thanks for this article! I’m actually just getting into iPhone-optimized web site design more deeply and this article is very useful.

    I wrote some very lightweight JavaScript and PHP code for web site owners to detect mobile devices. The code is available for free download!

    - JavaScript: http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

    - PHP Code: http://www.hand-interactive.com/resources/detect-mobile-php.htm

    Download the code and follow the simple instructions. You can detect as broadly (Is this a smartphone class device?) or as narrowly (Is this an iPod Touch?) as you need.

    So take a look at the code and see if it helps you better meet the needs of your web site visitors!

    Cheers,
    Anthony Hand
    Mobile User Experience Designer

    Reply
  4. moumni says:
    October 25, 2008 at 7:58 am

    thanks dude, used your css with my home security/monitoring system. looks great on my iphone now ;)

    Reply
  5. Busby says:
    November 1, 2008 at 2:32 am

    This articles is very useful! I have tried it on my Iphone and the site fits well!

    Reply
  6. vinoy says:
    January 21, 2009 at 10:05 pm

    One can test thr sites on http://iphonetester.com/

    Reply
  7. Raphael says:
    January 23, 2009 at 1:10 am

    Can you incorporate wordpress or some kind of blogging feature with this?

    Reply
  8. nikhitha c p says:
    February 10, 2009 at 3:04 am

    excellent!!

    Reply
  9. mymamakcorner says:
    February 28, 2009 at 11:00 am

    thanks , this is a very good tutorial.

    Reply
  10. Web Design Creatives says:
    March 15, 2009 at 1:46 am

    Thanks, It’s really nice informative post. I was looking for the same

    Reply
  11. iTod says:
    March 24, 2009 at 7:18 am

    This is great but how do you create sliding pages. or links to secondarypages?

    Reply
  12. Anton Ongsono says:
    April 22, 2009 at 9:19 pm

    how to detct touch for zoom in or zoom out?

    Reply
  13. iphone architect says:
    May 6, 2009 at 1:13 am

    great article, hanks

    Reply
  14. rzmota says:
    May 15, 2009 at 12:50 pm

    thanks for this tutorial, but I am looking for a somthing which can load a new HTML document after rotate iphone, so it will work on the same idea as above but change the filepath not the css style document.

    Anyone has an idea?

    Thanks a lot.

    Reply
  15. mat says:
    May 27, 2009 at 8:15 am

    I have my page done, on the page is a link to call a phone #. This works fine unless you are on an iPod Touch. what code can I add to make a dialogue box pop up telling the user that they are on an iPod and not an iPhone? Here is what i have so far:

    #

    Thanks!

    Reply
  16. FemaleEDPillz says:
    June 25, 2009 at 9:01 am

    Hello ;) Thank you for this website! Here is mine http://motrin.wikidot.com/

    Reply
  17. ericB says:
    August 21, 2009 at 12:06 am

    For some reason I cannot get the redirect to work. I copied and pasted your code at the beginning and it’s not working. Am I missing something here? Also, do I need to put the detection code within the conditional statements? Or is that optional?

    Reply
  18. ghansham says:
    September 15, 2009 at 1:01 am

    Thanks for the post, I have been roaming web for this tutorial. thanks a million again.

    Reply
  19. Yza says:
    September 16, 2009 at 4:06 am

    The redirect is not working for me either!
    dreamweaver is telling me i’ve got a syntax error in this line

    var users_browser = ((browser.indexOf(’iphone’)!=-1);

    I’ve tried every other syntax… is this the problem?

    Reply
  20. Palaniraja says:
    September 27, 2009 at 9:55 am

    know what? It didn’t help me. I was looking for a solution where the iphone load different css on each portrait (portrait and landscape) it didnt load the css on the fly (tilt) it needs a refresh.

    But “Jay Salvat” solution just works fine. Thanks for the tutorial.

    Reply
  21. zjm1126 says:
    October 5, 2009 at 7:39 pm

    on http://www.testiphone.com/ your demo has a problem
    the pic is at http://hi.baidu.com/zjm1126/album/item/0df431d4ef85642da08bb72a.html

    Reply
  22. mifition says:
    October 16, 2009 at 4:07 am

    Interesting, i am currently writing a system that needs to detect whether is an iphone or uses wap and send the user to the appropriate page. We are developing interactive novels for mobile phones in the UK. Check our site: http://www.mifiction.co.uk, we go live in febuary next year

    Reply
  23. Sam says:
    December 8, 2009 at 11:26 am

    nice tutorial, i am facing an issue, we have a page which is making use of the user name and pwd sent by the end user, and sends it to an AJAX javascript compoenent, which generates the authentication header parameter like this :

    var auth = make_basic_auth(document.forms["loginform"].username.value,document.forms["loginform"].password.value);
    req.setRequestHeader(‘Authorization’, auth);

    The AJAX runs fine when tested on a normal browser, but on iphone gives an error HTTP Authentication is required. Can you please suggest how can we pass http authentication on iphone web app

    Reply
  24. Jarrod Murray says:
    March 11, 2010 at 1:14 pm

    This redirect didn’t work for me either… I replaced the javascript in the tutorial with:

    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf(“iphone_redirect=false”) == -1) window.location = “http://www.YOURDOMAIN/iphone_index.html”;
    }

    And it worked.

    Reply
Comment Page 2 of 2 1 2

Add a Comment