The {Code} Cookbook

Target iPhone with CSS

By gilbitron in CSS on 27/02/2009 at 01:51

Views: 1861
Tagged: css, iphone
URL: http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

Starter:

The logic of this is that only browsers that understand "screen" understand "only", and of these, only the iphone has a "max-device-width" of 480px. The reason for the anti-IE comments is that some versions of IE render CSS regadless of media type declarations.

Main Course:

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

Expand Report Code | Install Coda Clip

Please log in to vote.

Compliments to the Chef

1. Comment by Daniel Calderon on 08/06/2009 at 21:43

   I tried this on my website and it did not work

2. Comment by John Fredrickson on 19/06/2009 at 02:08

   Likewise. iPhone refused to pick up any stylesheets linked in this manner.

3. Comment by Matt Albert on 29/06/2009 at 20:46

   It did not work on my site either.

4. Comment by Alex Grande on 23/07/2009 at 12:42

   I think he meant to put is @media only screen and (max-device-width: 480px) {
   #wrapper {
   margin: 0 20%;
   }
   }
   
   But guess what. Opera listens to it too. So ya...

How was your Meal?