iPad and iPhone Development: Using CSS Layouts

By Scott Clark

We've learned how to detect the iPhone and iPad user agent, how to test and set orientation and how to test our iDevice-ready websites using Safari. This week we're going to show you how to start putting all of the pieces together, and use CSS layouts for the disply of our iPad-ready website.

The first thing we'll need to do is detect the user agent of the visitor to our site. That way we can assign a specific Cascading Style Sheet (CSS) for the iPad (or iPhone), and another for standard browsers.

If we wanted to, we could use a conditional statement directly in CSS itself--but it works equally well either way, so we're going to present both options here. This is how you could do it within the CSS:

<!--#if expr="(${HTTP_USER_AGENT} = /iPhone/)"-->
<style type="text/css">
<!--
iPhone styles go here
-->
</style>
<!--#else -->
<style type="text/css">
<!--
regular web browser styles go here
-->
</style>
<!--#endif -->
I chose to use the JavaScript method of loading the appropriate style sheet based on the user agent. In our case, we are only looking for the iPhone and iPad user agents:
<script type="text/javascript">
if((navigator.userAgent.match(/iPad/i))) {
document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"ipad.css\" charset=\"utf-8\" \/>");
document.write("<meta name=\"viewport\" content=width=1024px, minimum-scale=1.0, maximum-scale=1.0 \/>");
}
else if(navigator.userAgent.match(/iPhone/i)) {
document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"iphone.css\" charset=\"utf-8\" \/>");
document.write("<meta name=\"viewport\" content=width=768px, minimum-scale=1.0, maximum-scale=1.0 \/>");
}
else
{
document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"normal.css\" \/>");
}
</script>
As you can see, I also included viewport orientation information in the document write statements. This way the page will work properly in the iPhone and iPad in both landscape and portrait orientations. I found a tutorial called iPad CSS Layout with landscape / portrait orientation modes which explains how the CSS works, and also includes a demo and example code for the layout that you can use with your own site.

Here is what it looks like using the portrait view of an iPad. I tested it under Safari, using the iPadPeek emulator:

Here is what it looks like in landscape mode using the emulator:

And here is what it looks like using MSIE8:

Note: To create your own JavaScript write statements, I highly suggest using the JavaScript Document Write Converter. It takes the pain out of document write statements, which have to be formatted with extra characters to make sure the code is printed, not interpreted. Another useful tool I used is the Lorem Ipsum Generator, which is handy for creating temporary text within a test document.

So now we're starting to put it all together. We know how to find out if our site's visitors are using an iPhone or iPad, and if they are, we assign a specific style sheet that works for their device, and if they turn their device sideways to view the site in landscape mode, it will fill out their screen and move the appropriate elements to be more useful.

Next week we're going a step further. We're going to discuss the CSS we use, and then we'll get into the creation of menu systems for the iPhone, along with some CSS resources for iPhone and iPad development.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •