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.