You are Here: Reverb Studios | Blog | How to Guides | Optimise Your Site for iPhone – VERY Simply!

Optimise Your Site for iPhone – VERY Simply!

This post was published 1 year 8 months 3 days ago which may make it a bit inaccurate or irrelevant today. Things change and I cant keep checking old posts for validity. I wont be held responsible for any misunderstanding. Leon - Reverb Studios

Here’s a quick method of fixing some common problems with your site that might cause it to display weirdly in the now ubiquitous iPhone/iPod devices. My own lovingly crafted main site and blog design were nearly fine on the iPhone but there was strange resizing of both the background image and some of the navigation links & text. The background image is central to my design so I had to do something!

For WordPress powered sites and blogs there are many great plugins to automatically render a stripped down version of the site but I really wanted my design to be visible. I found out that the iPhone Safari browser automatically resizes elements on a web page including text and background images so to combat this simply add the following to your body tag:

-webkit-background-size: 2000px 1024px; (The exact size of my background image in this case)
-webkit-text-size-adjust: none; (Stops the iPhone from resizing any text on a page)

“webkit” is specific to the Safari browser so adding this code will not mess up anything in other PC based browsers.

You could take this a stage further and try to detect iPhone visitors with the following code and give them an iPhone specific stylesheet and viewport:

This goes in your <head> section:

<!– iPhone Detection –>
<?php
if (ereg(‘iPhone’,$_SERVER['HTTP_USER_AGENT'])) {
$iphone = 1;
}
elseif (ereg(‘iPod’,$_SERVER['HTTP_USER_AGENT'])) {
$iphone = 1;
}
else {
$iphone = 0;
}
?>

<!– If it’s an iPhone, show the Viewport Meta tag and iPhone CSS –>
<?php if ($iphone == ’1′): ?>
<meta name=”viewport” content=”width=320px” />
<link rel=”stylesheet” type=”text/css” href=”iphone-style.css” media=”only screen and (max-device-width: 480px)” />

<!– If it’s NOT an iPhone, show the normal CSS and no Viewport Meta tag –>
<?php else: ?>

<link rel=”stylesheet” type=”text/css” href=”normal-style.css” media=”screen” />

Leon.

This Article has had 550 views so far.

Posted in How to Guides, Website Optimization Tips on June 8th, 2010
Tags: iphone css, iphone detection, iphone optimization, iphone viewport, webkit
Follow responses to this article through the RSS 2.0 feed.
leave a Comment, or Trackback from your own site.