I'm trying to use a CSS media query, specifically targeting the iPhone.
It works when I use a regular link rel:
<link rel="stylesheet" type="text/css" href="css/mobile.css" />
However, when I try this media query it doesn't work:
<link rel="stylesheet" type="text/css" href="css/mobile.css"
media="only screen and (max-width: 640px)" />
How can I use a CSS media query to target the iPhone?
Try:
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="only screen and (max-device-width: 480px)" />
The difference is max-device-width instead of just max-width. Also see 2) on http://blogs.sitepoint.com/iphone-development-12-tips/.