Designing HTML for Mobile (Android and iPhone)

by Stephen Fluin 2010.01.26

The W3C recommended way of targeting mobile devices is for stylesheets to use the media attribute. Unfortunately, this attribute isn't used by either the Android browsers or the iPhone browser. Instead these browser report that their media is of type "screen", this is the standard used by desktop browsers as well.

There is a trick that is possible still using media detection that selectively applies the styles based on the screen width. The following code is an example of two stylesheets. The first should be applied on desktop computers, and the second should be applied on Android and iPhone.

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

Find additional information and tips at