Web Development Blog

by Ei Sabai Nyo

12 Jun, 2009

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
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" />

apple-touch-icon
An example of apple-touch-icon for Facebook

apple-touch-icon
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.
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

16 Responses to “Making a website iPhone-friendly using CSS”

  1. Levon Gravett says:

    Thank you for this really helped me a lot. I have one question tho as I am nee to mobi sites. How would I go about setting up the domain for the site I would like to have it as mobile.site.com how would I set this up so that the mobile device picks it up? Your help would be greatly appreciate. Many thanks. Levon

  2. eisabai says:

    Hi Levon,
    If you want to redirect your visitors to a different address/domain based on what browsers they are using, you can use this mobile user agent detection script: http://detectmobilebrowsers.mobi/

  3. This is a really useful post, but the key as always is planing your website. Hiding stuff may not be the best solution but it will be quicker. Its probably going to be easier to plan content structures for all media types from scratch. Well that rather than trying to create a stylesheet for an existing site on the basis that background image substitution would be one of the quicker ways to style using alternate stylesheets. Anyhow well done on the post mate.

  4. [...] some simple optimisation of this site for iPhone using only CSS. I picked up some good tips here and [...]

  5. [...] came across this fantastic resource. Finally, for information on CSS for the iPhone, I found this site. Possibly related posts: (automatically generated)No Title Categories: Uncategorized [...]

  6. [...] Make a Website iPhone-friendly Using CSS [...]

  7. J says:

    “Unlike any other mobile web browsers, iPhone comes with Safari browser which makes it possible to view any website that works on Safari.”

    Ever heard of Opera and Opera Mobile? :)

  8. thank you for explaning to us how to make it website i phone friendly using css, it is really great idea, i would like to try it

  9. Steve Rio says:

    Thanks! Awesome.

  10. [...] Making a website iPhone-friendly using CSS [...]

  11. [...] makes previewing and viewing post and pages on our blog a lot easier. We have written a tutorial on How to make a website iPhone-friendly using CSS. We also recommend you to read two great books on iPhone Web Development, Building iPhone Apps with [...]

  12. Hoping someone can help.
    Need to hire a web developer with some experience or interest in iphone app development
    need php or javascript and css, html, jsp experience along with some experience in screen design.
    professional experience preferred or a passionate hobbyist is a possibility.
    good salary and employee benefits
    contact: steve rhoades, 610-687-7742 or email me: steve@wrplacement.com
    thanks

  13. Icechen1 says:

    WPtouch iPhone Theme is also a great way to make your WordPress wite mobile-friendly by creating a theme for iPhone and iPod Touch, the mobile version of the site also works on Android. :)
    .-= Icechen1´s last blog ..Google adds free phone calling in Gmail- Skype competitor =-.

  14. Jedediah says:

    Hello. Helpful tips! Thanks a lot. I have a problem, however. I am developing a site that is to be viewed on different devices and browsers. It’s set to use a different (CSS) style sheet for each (phone, iPad and Internet Explorer for example). The problem I have is that an iPod Touch is using my iPad CSS to display the information (I tried directing iPod Touch users to their own CSS but it wouldn’t work). SO! How can I add styles to my iPad particular style sheet so that iPod Touch/iPhone users will have it display correctly? Really, my only problem is that the text it too large.

    I tried adding:
    @media screen and (max-device-width: 480px){
    /* All iPhone only CSS goes here */

    to the file, but it doesn’t work. Perhaps it’s formatted badly or simply not able to work in conjunction with a style sheet made for the iPad.

    I’m fairly new to CSS to pardon me if my questions were already answered or are hard to follow :p

  15. [...] iPhone CSS CSS for iPhone helps in making websites that are IPhone Friendly; the Following website has steps on creating a good CSS for iPhone: http://eisabainyo.net/weblog/2009/06/12/making-a-website-iphone-friendly-using-css/. [...]

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories