Optimise Your Site for iPhone – VERY Simply!

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.

Advertisements

Published by

Leon Quinn

Multimedia Design company in Leitrim, Ireland specializing in WordPress Website Design, Photoshop and Graphics. www.reverbstudios.ie

One thought on “Optimise Your Site for iPhone – VERY Simply!”

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s