What's the best way to switch between jQuery UI and jQuery Mobile

Question

I want a single site that uses the same HTML but "widgetizes" it in the best way for the platform it's served to.

Is there a standard practice for feature detecting mobile devices / hardware keyboards on the client and deciding whether to load jQuery Mobile along with the site's mobile JavaScript or jQuery UI and a script for a desktop experience?

The following seems like a reasonable way to do it but I wonder if Modernizr.touch is the best way to detect this? e.g.: Forcing touch might not be the best solution for Surface. Is there any way to detect if there's also a hardware keyboard?

Modernizr.load({
  test: Modernizr.touch,
  yep : ['jquery-mobile.js','mobile.js']
  nope: ['jquery-ui.js','desktop.js']
});

Edit:

Found some relevant Modernizr bugs:

• Modernizr.touch detects touch events not touch devices
• IE10 "metro" is not detected as a touch capable device

I guess what I really need is a way to detect both whether the device is capable of touch and if it has a hardware keyboard. I could use David Mulder's answer for detecting device width in physical units (inches) as a proxy for that and assume anything > 11 inches has a keyboard, but I bet there's a massive tablet out there (or Google will release a nexus 12 tablet :) where that would make a wrong assumption.

Answer 1

Ok, I don't have the devices at my disposal right now to check this, but the way to go is something along the following lines:

DPI can't be calculated straight from JS, but

var dpi = 50;
while(window.matchMedia("(min-resolution: "+dpi+"dpi)").matches && dpi<500){
  dpi+=1;
}

is possible which allows us next to calculate the screen diagonal like this

var screendiagonal = Math.round(Math.sqrt(Math.pow(window.screen.availHeight,2)+Math.pow(window.screen.availWidth,2))/dpi)

if (screendiagonal < 4) "phone"
else if (screendiagonal < 11) "tablet"
else "computer"

Let me again repeat that I have never done such a thing before and especially in that first piece of code there might be a mistake, however something like should be possible and I will check tonight if I don't forget.

Oh and it's good to note that this won't work on desktops, so an additional check should be made whether the final dpi is 500 in which case it's a desktop system (though the userAgent may examined too for this). Additionally it might be necessary to figure out the -webkit-min-device-pixel-ratio value as well to incorporate this in the calculation (just loop over it till you find the correct ratio and multiply the dpi by this ratio).