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/<span class="skimlinks-unlinked">header.jpg</span>);
background-repeat:no-repeat;
height:149px;
}
#content
{
background:url(../images/<span class="skimlinks-unlinked">middle.jpg</span>);
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/<span class="skimlinks-unlinked">bottom_corners.jpg</span>);
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/<span class="skimlinks-unlinked">l_header.jpg</span>);
background-repeat:no-repeat;
height:120px;
}
#content
{
background:url(../images/<span class="skimlinks-unlinked">l_middle.jpg</span>);
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/<span class="skimlinks-unlinked">l_bottom_corners.jpg</span>);
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!
No comments:
Post a Comment