什么是在jQuery UI和jQuery Mobile之间切换的最佳方式

Question

我想要一个使用相同HTML的网站,但要以最好的方式为它所服务的平台"小组化"它.

是否有一种标准做法,用于检测客户端上的移动设备/硬件键盘,并决定是否加载jQuery Mobile以及该站点的移动JavaScript或jQuery UI以及用于桌面体验的脚本？

以下似乎是一种合理的方法,但我想知道Modernizr.touch是否是检测此问题的最佳方法？例如:强制触摸可能不是Surface的最佳解决方案.有没有办法检测是否还有硬件键盘？

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

编辑:

找到一些相关的Modernizr错误:

• Modernizr.touch检测触摸事件而不是触摸设备
• IE10"metro"未被检测为具有触控功能的设备

我想我真正需要的是一种检测设备是否能够触摸以及是否具有硬件键盘的方法.我可以使用David Mulder的答案来检测物理单位(英寸)中的设备宽度作为代理,并假设任何> 11英寸有键盘,但我打赌那里有一个大型平板电脑(或谷歌将发布nexus 12平板电脑: )这会做出错误的假设.

Answer 1

好吧，我现在没有可以使用的设备来检查这一点，但要采取的方法如下：

DPI 不能直接从 JS 计算出来，但是

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

是可能的，这允许我们接下来像这样计算屏幕对角线

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"

让我再次重申，我以前从未做过这样的事情，尤其是在第一段代码中可能会有错误，但是类似的事情应该是可能的，如果我没有忘记的话，我会在今晚检查。

哦，值得注意的是，这不适用于台式机，因此应进行额外检查，以确定最终 dpi 是否为 500，在这种情况下，它是台式机系统（尽管也可能对此userAgent进行检查）。此外，可能还需要计算出该-webkit-min-device-pixel-ratio值并将其纳入计算中（只需循环遍历它，直到找到正确的比率并将 dpi 乘以该比率）。