CSS Media Query Won't Work

Why are my CSS3 media queries not working on mobile devices?

All three of these were helpful tips, but it looks like I needed to add a meta tag:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Now it seems to work in both Android (2.2) and iPhone all right...

CSS Media Query Won't Work

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.

Related Topics