Different CSS for iPhone and other portable devices

Mar 11, 2010 by d0rr    No Comments    Posted under: Web Development

With Apple’s iPhone and iPod Touch, Google’s Android smartphones and other portable devices gradually dominating the market, it is getting more important to optimize websites to look better in these relatively-smaller-screen portable devices.

If you have been in CSS game for quite a while, you may think that defining media=handheld will do the trick

@media handheld {
  .navigation {
    display: none;
  }
}

Unfortunately Apple defined it in such that iPhones will look for “screen” media type instead of the limited “handheld” media which deem to be outdated.

The solution to this is to specify CSS rule that looks at the device screen resolution.

There are some sayings that Internet Explorer has issues ignoring the CSS rule, but that can be easily fixed with Internet Explorer’s “conditional comments” feature.

Conceptually, you can define a separate set of CSS for iPhone (or devices with width less than 480px) as follow:

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

And the iphone.css can be any CSS definitions that will overwrites the original CSS definitions.

Hopefully this basic and simple trick can help you to kick start your website revamp to cater for different sizes of portable devices.

Got anything to say? Go ahead and leave a comment!