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?
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.
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/.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With