Birmingham Web Designer Jeremy Flint blogs here. He works for Kinetic Communications. He organizes events and programs for IPSA. He takes pictures and posts them on Flickr. He also blogs about Hiking and Mississippi State Sports when he has the time. He recommends Dreamhost for all your hosting needs. Make sure you grab the RSS Feed.

It is clear that the iPhone is indeed a “revolutionary internet communications device”. We have all seen the commercial showing off the web browser where it loas the entire page and you click an area to zoom in on it. However, that isn’t the only way to view websites on the iPhone. You can turn off the zoom feature and allow the page to load at normal size. The drawback to this is, of course, that sites are designed for a minimum of 800 pixels wide, and the iPhone is at most 480 pixels wide.

So how do you target the version of Safari that runs on the iPhone. It doesn’t support the “handheld” media type because it wants to show the “not watered down version of the Internet.” There have been several methods come out recently and I thought I would highlight them here. The iPhone has a unique user agent string that makes it easy to detect via scripting. Apple has also suggested some CSS tricks to deliver stylesheets to only the iPhone.

iWPhone for Wordpress

For this site, I am using the iWPhone plugin and theme package developed by Content Robot. It uses some PHP to sniff the browser/device, and if it is identified as the iPhone browser, it wraps your content in a template that is designed specifically for the iPhone, allowing you to browse the site without the aid of the “tap to zoom” feature.

One thing I have noticed about this plugin is that it does not work beyond the homepage of my site. If I click on an individual post, it reverts back to my standard template. Maybe I am just missing something on my single post template.

Client Scripting

The way that the iWPhone package works is by executing a snippet of PHP to determine if the user is browsing your site with an iPhone or not. To do this, it sniffs the USER AGENT string of the browser. If it is identified as an iPhone, it replaces your stylesheet with the one from the iWPhone template. This would be easy to do in any case with just about any programming language, from PHP to Javascript to ASP to Ruby.

Here is the USER AGENT string that identifies the iPhone browser:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419.3

Shannon Appelcline posted a script that he uses in the iPhoneWebDev group at Google. It sniffs the USER AGENT and if iPhone is present, it uses a completely seperate stylesheet.

if (ereg(\"iPhone\",$_SERVER['HTTP_USER_AGENT'])) {
          $iphone = 1;
        } else {
          $iphone = 0;
        }
	
...
	
< ? if ($iphone) { ?>
	
< ? } else { ?>


< ? } ?>

That appears to be PHP, but it could be written the same way for just about any language.

The CSS Media Query

Apple is suggesting a method to deliver styles to the iPhone via CSS. The iPhone browser completely ignores the print and handheld media types because they typically do not supply the high-end content that the iPhone is capable of using. You should use the screen media type when delivering styles to your iPhone. The way to deliver your iPhone tweaked styles so that no other browsers see them is by using the only keyword in conjunction with the screen media type.

<link media=\"only screen and (max-device-width: 480px)\"
href=\"iPhone.css\" type=\"text/css\" rel=\"stylesheet\" />

The theory is that older browsers will ignore the CSS because they don’t understand the only keyword. However, some people have found versions of IE that will render CSS regardless of the media type. The solution for that would be conditional comments.

<!--[if !IE]>-->
<link media=\"only screen and (max-device-width: 480px)\"
href=\"iPhone.css\" type=\"text/css\" rel=\"stylesheet\" />
<!--<![endif]-->

This method basically uses a new feature in CSS3 called Media Queries which consists of a media type and one or more expressions involving media features. You find more information about Media Queries in the CSS3 spec.

So that should just about cover it. Like I said before, there are multiple options for handling iPhone users, from delivering separate styles via CSS to detecting the USER AGENT via scripting. There is a great thread on this topic running in the iPhoneWebDev group at Google.

This entry was posted on Wednesday, July 11th, 2007 at July 11,2007 @ 8:59 am and is filed under Apple, Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.