Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS media query on iPhone

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?

like image 573
Ryan Avatar asked May 31 '11 18:05

Ryan


People also ask

Can you use media queries in CSS?

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech). In addition to media types, there are also media features.


1 Answers

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/.

like image 173
bensnider Avatar answered Sep 22 '22 12:09

bensnider