CODEWITHSUNDEEP
jquerycssmobilemodernizrxhtml-transitional
jhoffmcd
jhoffmcd

Reputation: 63

Retrofitting an old XHTML site for mobile?

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

Upvotes: 2

Views: 82

Answers (1)

Pieter Beulque
Pieter Beulque

Reputation: 191

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.

Upvotes: 2

Related Questions