Making a website iPhone-friendly using CSS

12 Jun, 2009

Making a website iPhone-friendly using CSS

Web Development » CSS, Design, Tutorials » Making a website iPhone-friendly using CSS

Unlike any other mobile web browsers, iPhone comes with Safari browser which makes it possible to view any website that works on Safari. However, the challenge is that the screen size of an iPhone is not as big as a traditional monitor and therefore, if you have got a website which has a width of say, 1000px, the website will appear really small and unreadable on an iPhone screen.

Screenshot of Web Development Blog on iPhone

Here are the steps to make a website iPhone-friendly using just CSS.

1. Create a separate stylesheet for iPhone

Tips:
1. Hide unnecessary elements
On this blog, I set the following elements to display: none in CSS. Use display: none rather than visibility: hidden because visibility: hidden will also hide the content inside an element and not hide the element completely.
2. Use a fluid layout
Set the width of your main container (or any other containers) to 100% rather than a specific width in pixel.

For example:

body {
background-color: #fff;
}

.header, .footer {
width: 100%;
}

.sidebar {
display: none;
}

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

The viewport of an iPhone is 320 pixels in portrait orientation and 480 pixels in landscape orientation.

2. Specify meta data for viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Here, I am not specifying any width because I am using a fluid layout. Setting the user-scalable property to 0 (false) ensures that the user isn’t able to zoom in or out the website. Refer to Safari HTML Reference – Supported Meta Tags to see any other meta tags that you might want to use.

3. Create an icon

This is very much like a favicon that will be used when the user add your website to their home screen. Use the following code to specify a custom icon. The icon should be at least 57×57 pixel.

<link rel="apple-touch-icon" href="/iphone.png" />

An example of apple-touch-icon for Facebook

An example of apple-touch-icon for Web Development Blog

4. Putting it altogether

Add all of the above to the <head> section of your website.

<!-- Start iPhone -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="/iphone.png" />
<link media="only screen and (max-device-width: 480px)" href="/iphone.css" type= "text/css" rel="stylesheet" />
<!-- End iPhone -->

For WordPress (template specific)

<!-- Start iPhone -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="<?php echo bloginfo('template_url'); ?>/iphone.png" />
<link media="only screen and (max-device-width: 480px)" href="<?php echo bloginfo('template_url'); ?>/iphone.css" type= "text/css" rel="stylesheet" />
<!-- End iPhone -->

A few things to note

The overflow CSS property does not work very well on iPhone. The scrollbars aren’t displayed but you can use two fingers and scroll across the area.
This solution does not make the website light-weight because all elements on your website are still loaded. However, it does look neater and cleaner because many elements are hidden via CSS using display: none.
The ideal solution is to develop a special version of the website for iPhone using mobile detection script and essentially reduces the bandwidth required to load the website on mobile devices.
Have a look at a few websites that are optimisied for an iPhone for an inspiration. View this blog on an iPhone, check out iBloggr theme (WordPress iPhone Theme) or view demos of these mobile templates.

Recommended books

Interested in getting an iPhone friendly website for your company or organisation? Contact us at Anansi Web Development to find out how we may be able to help you.