CSS Media Query Won't Work
css, responsive-design
Solution
I always call mine when I link the CSS in the head of the HTML.
An example from a current page I'm working on:
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />
This selects the CSS doc that will be loaded right from the start instead of selecting styles after the CSS document is loaded (reduces number of HTTP requests)
When doing this within the CSS document itself, you should generally replace `max-device-width` with `max-width`.
Problem
I keep trying to do a media query in my CSS doc doing something like: ``` @media screen and (max-device-width: 480px) { /*css here*/} ``` but it won't work when I test it on an iPhone. I've tried changing the sizes and using the portrait/landscape feature, but still nothing. What am I doing wrong?