2

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'
 ]); 

1 Answer 1

2

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.

1
  • 1
    Totally worked better than what I was doing. Somebody told me to use Modernizr but I realize that its actual for sites using html5/css3 that want to support fallbacks.
    – jhoffmcd
    Commented Aug 3, 2012 at 22:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.