Determine if a mobile browser is CSS and javascript capable or not

I'm designing a mobile site, and basically I want two versions. One will be javascr开发者_Go百科ipt and css intensive, while another will be for older phones. Very simple xhtml.

Any way to auto-redirect depending on the browser's capabilities?

IF built correctly, then the same XHTML site should support both versions.
That said, I see several possibilities:

1. Check the user agent to determine the browser type
2. Use a noscript tag on the intensive JS version with a link to the simple site
3. Use JS to redirect to the intensive JS version on the simple XHTML site (not very good in terms of SEO)

Download a short html file that has a meta-refresh set to 1 second, and it will also have javascript in it. If the javascript starts then it immediately changes the url for the meta-refresh.

This is a poor-mans graceful degradation concept, as older cellphones will have slower connections so downloading the web application twice is a bad design.

Ideally you should just have them download the non-js version, but is has script tags in it, so it will also download at least one javascript file, and that would use unobtrusive javascript to change the original page.

But, since I expect that would be a bad design, that is why I suggest the meta-refresh, to have a very tiny pause between downloading to give the javascript time to fix it.

You could also check for which version of javascript by checking the existence of certain objects (such as <canvas>) and based on that change to the correct url.

Take a look at UAProf, "a specification concerned with capturing capability and preference information for wireless devices. This information can be used by content providers to produce content in an appropriate format for the specific device." (quote from the Wikipedia page.)

Also interesting is WURFL, an open-source "XML configuration file which contains information about capabilities and features of many mobile devices." You might also like to read this: WURLF and UAProf.

DeviceAtlas is a popular commercial solution that claims to be more comprehensive than WURFL (it includes all the WURFL data and more). See: How do you compare DeviceAtlas to WURFL and UAProf.

You probably don't want two separate versions of your site. It's a better idea to progressively enhance your simple experience using feature detection to determine when to do the fancy stuff. That being said, CSS rules will often degrade gracefully on their own if the browser doesn't support them.

.background-gradient {
  background-color: #333; 
  background-image: url(some_image.png); /*older browsers simply get the bg image*/
  background-image: -webkit-linear-gradient(top, #333333, #eeeeee); 
  background-image: -moz-linear-gradient(top, #333333, #eeeeee);
  background-image: -ms-linear-gradient(top, #333333, #eeeeee);
  background-image: -o-linear-gradient(top, #333333, #eeeeee);
  background-image: linear-gradient(top, #333333, #eeeeee);
}