I have an old site that needs a quick mobile upgrade. I've researched this and found many great answers about how to do this when starting a new project. I was curious to see if anybody had any experience doing this and if so what methods are best for this kind of job? I tried Modernizer and can't get it to return true on any media queries (Modernizer.mq)
Here is the code i tried:
Modernizr.load([
{
test : Modernizr.mq('screen and max-device-width: 480px'),
yep : 'css/mobile.css',
nope : 'css/styles.css'
]);
The valid media query is only screen and (max-device-width: 480px).
The only is used for a bug I cannot recall now, but it doesn't break anything in another browser, so that's okay.
You have to wrap the max-width specification between brackets.
However, you shouldn't rely on Javascript to load your css files. You can include them with
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 480px)"
<link rel="stylesheet" type="text/css" href="screen.css" media="only screen and (min-device-width: 481px)"
You might need a fallback for non-media-query supporting browsers.