CSS3 Media Queries are not working

Question

I've recently been developing a mobile version for a website, and quite simply want to be able to change the CSS file if the browser is detected to be on a mobile device. You can view my previous attempts here, but I have now decided that the most feasible way of getting this done is to focus on Media Queries.

The problem I have here is that the media queries just don't work at all. It always loads the default stylesheet. Here is the code I have:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

Have I missed something with this code? I've tried using the many tutorials offered for this but none seem to help me. I've really hit a dead end here so any help would be massively appreciated.

Answer 1

The default stylesheet doesn't have any attributes that would stop it from being loaded.

You could give it media="screen and (min-width: 481px)", but that would lead to the danger, that older browsers won't load it either.

Usually it's best, to have the default stylesheet load and just make sure, that the mobile stylesheet overrides anything you don't need from the default stylesheet.