I'm using three separate style sheets with different media queries to load my site suitably at various screen sizes, however I can't seem to get the mobile style sheet (max-width: 480px) to load at all. Instead it loads the (max-width: 1000px) style sheet.
Here's how they are presented in the html
<link rel="stylesheet" type="text/css" href="/CSS/page_style.css" media="screen">
<link rel='stylesheet' type="text/css" href='/CSS/page_narrow.css' media='screen and (max-width: 1000px) and (min-width: 481px)'>
<link rel='stylesheet' type="text/css" href='/CSS/page_thin.css' media='screen and (max-width: 480px)'>
EDIT - I have just tried with the viewport meta tags and works. Thanks guys I'd been stuck on that for a few days now!