I want to build an HTML5 app that will work on nearly every platform (qualified as desktop: FF, Chrome, Safari, IE9+, mobile: iOS, Android built-in browsers, not installed App browsers) -- if it is a mobile platform (phone, tablet) the view should accomodate the small screen. I have looked at a lot of different frameworks and they all have pros/cons.
For example, Sencha Touch has very nice widgets, but only works on Webkit. In addition, if I go with a mobile JS framework like jQueryMobile, it opens it up to desktop browsers (IE, FF support), but the mobile navigation views aren't really applicable in a desktop browser.
Aside from building multiple versions of the site hosted at different URLs, I'm trying to figure out if there is a best-path forward. I know I can use CSS3 media queries to load alternate CSS, but there is not alternative way to do this for JS (or is there)?
So, I'm coming to the conclusion that I shouldn't necessarily use one of these frameworks and try to do a flexible layout like this guy's site (layout/images adjust appropriately to viewport): http://artequalswork.com/ -- but I do need some JS heavy widgets like data grids that I don't want to build myself.
As an example, I might like to use KendoUI for the desktop version, and sencha-touch or jquery-mobile for the mobile version. I'm not sure how to do this cleanly w/o building two separate versions of the app. Any pointers?