Take the 2-minute tour ×

I want to change my web page CSS for web browsers running on cell phones, like the iPhone and Android. I've tried something like this in the CSS file:

@media handheld {
  body {
    color: red;

But it doesn't seem to have any effect, at least on the iPhone. How can I write my CSS to work differently on the iPhone etc, ideally without using javascript?

share|improve this question
Most smartphones tell CSS they're "screen" ...which sorta makes sense considering their relatively large size and high resolution. A few parts of HTML/CSS standards are not very useful, and CSS "handheld" is one of them. Instead of CSS device classes, use CSS Media Queries to check actual dimensions (but even that is somewhat tricky because of the "logical viewport"). –  Chuck Kollars Apr 8 '13 at 19:38

3 Answers 3

up vote 29 down vote accepted

You can use @media queries:

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

This particular version will target the iPhone (and any other device with a screen of max-device-width of 480px.

Apple, for the iPhone, though this is from memory so I can't be entirely sure of its accuracy, chose to disregard the use of handheld or mobile stylesheets, since it, and other iOS devices, were capable of rendering css more or less on a par with desktop browsers, via Safari. For other devices I'm unsure, exactly, how faithful they are, though the A List Apart article (linked-to above) gives a brief run-through of some.

Edited in response to comment, from @Colen:

Hmm, it looks like a lot of new mobile devices have higher resolutions (e.g. droid X is 854x480). Is there any way to detect those? I don't think those are being handled with this query.

I'm unable to say for certain, since I've no access to those devices, however another A List Apart Article: Responsive Web Design notes that:


So I presume that they, Android devices, must be target-able by @media-queries, but, as noted, I'm unable to say with any certainty.

To target device-resolution, there is an example of:

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

Further reading: W3 Candidate Recommendation for media queries.

share|improve this answer
It should be "max-device-width" (you have a space in there), but otherwise this was great. Thanks! –  Colen Oct 8 '10 at 19:03
Thanks @Colen, the typo's now fixed. =) –  David Thomas Oct 8 '10 at 19:06
Hmm, it looks like a lot of new mobile devices have higher resolutions (e.g. droid X is 854x480). Is there any way to detect those? I don't think those are being handled with this query. –  Colen Oct 8 '10 at 19:18
@Lazza, thanks! –  David Thomas Dec 16 '11 at 8:52

From this site there are a few other media queries that are useful in targeting iPhones/Android Phones:

    // target mobile devices
    body { max-width: 100%; }

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
    // CSS goes here

// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
    // CSS goes here

I was able to successfully use the max-device-width media query to successfully target Android phones, although I had to adjust the width up to 800px rather than the 480 listed. For iPhone 4, the -webkit-min-device-pixel-ratio worked to target the iPhone4 (max-device-width: 480px did not, I presume that will target the iPhone3 but didn't have one handy to test.)

I can see this getting quite messy, but if you have to support a multitude of devices and have custom CSS for each of them, as long as they support media queries it appears as it is possible to do what you have to to tweak each platform. And yes, I would code to standards first, so that as much CSS is resuable, but many times we are talking about presenting alternate layouts these days sized appropriately for the devices being used.

share|improve this answer

@media handheld refers only to those ancient tiny proto-html cellphones from years past which couldn't even really display web pages. The ePUB, MOBI, Tablet, community of vendors all said emphatically "H*ck no, we are not @media handheld devices!" because they were correctly worried that this would land them forever in a no-man's land subservient to "real" web pages.

With today's small devices with very high resolution displays we still don't have a good way to tell HTML how to display things "correctly" on large displays with relatively low resolution vs. small displays with very high resolution. And as a certified old fart my eyes would like to remind you that no, the answer is not just to make everything including fonts 2X smaller.

share|improve this answer
Is it worth it to look at media queries on DPI/DPCM values, screen sizes in cm/inches, and aspect ratios, instead? –  Gert Sønderby Apr 19 '13 at 9:47

Your Answer


