Base support divide on media queries? about jquery-mobile

[scottjehl]

ugh. trying again...

Idea:

If we structured our head markup like this:
<!-- basic styles for all browsers -->
<link rel="stylesheet" href="css/basic.css" />
<!-- mobile applies in media-q supporting browsers -->
<link rel="stylesheet" media="screen and (min-width: 0)" href="css/mobile.css" />
<script src="jquery.andmobile.js"></script>

Then our first condition in jQuery Mobile's JS could have this:

if( !$.media('screen and (min-width: 0)') ) {
return;
}

Would that satisfy our A-grade vs. C-grade divide cleanly? Essentially, we'd make the cut based on media-query support, which might actually align quite cleanly with our browser support list.

C browsers still get basic styling of functional content.

Within mobile.css, we can make further divisions for desktop, tablet, handheld based on more specific media queries.

[scottjehl]

Quick breakdown of the breakdown the code above creates:

A Grade:

• iOS (all?)
• Android
• Blackberry Torch
• HTC w/Opera Mobile
• Opera Mini
• WebOS
• Fennec (I assume, as the nokia is not working right now)
• Desktop: Safari 3+,Chrome, Firefox 3.5, Opera (since like 7), Internet Explorer can also be given support through conditional comments

C Grade: (Coincidentally, when Media Queries aren't used, many of these browsers freeze on the "loading" screen in JQ Mobile)

• Blackberry Storm and older
• Mobile IE
• older phones
• older desktop browsers

I'm not sure of the Nokia divide, as both our n96 and n71 are not behaving right now.

[scottjehl]

implemented. also : looks like bb storm is now A. will need to check cache

[scottjehl]

k closing this then.