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

【问题标题】：What's the best way to switch between jQuery UI and jQuery Mobile在 jQuery UI 和 jQuery Mobile 之间切换的最佳方式是什么
【发布时间】：2013-02-07 03:06:57
【问题描述】：

我想要一个使用相同 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 错误：

我想我真正需要的是一种检测设备是否能够触摸以及是否具有硬件键盘的方法。我可以使用David Mulder's answer for detecting device width in physical units (inches) 作为代理，并假设任何大于 11 英寸的东西都有键盘，但我敢打赌那里有一个巨大的平板电脑（或者谷歌将发布一个 nexus 12 平板电脑:)，这会做出错误的假设。

【问题讨论】：

我对 Modernizr 了解不多，但我认为标准方法是检查屏幕宽度，以便为较小的设备提供特殊的 js 和 css。
@Joshua，但屏幕宽度可能不可靠。如果我也想将其扩展为具有平板电脑模式，那么我将如何区分桌面上的窄窗口和平板电脑之间的区别？有一个媒体查询可以可靠地检测手机/平板电脑我可以使用它：bricss.net/post/22198838298/… 虽然我发现它有点慢，而且它不适用于 IE9
那里有很多移动设备，even the most popular ones have highly variable screen widths。检测触摸事件不是处理事情的正确方法。标准做法是根据屏幕宽度提供不同的响应式布局。
问题在于，智能手机、平板电脑和台式机之间不再有任何明确的区分方法。 MS Surface 和 Asus Transformer 都是平板电脑和台式机； Kindle 或 Galaxy Note 介于智能手机和平板电脑之间。没有有意义的方法来区分这三个类别。您需要确定您真正想要区分的是什么，然后对其进行衡量。
stackoverflow.com/questions/13270659/…

标签： javascript jquery-ui jquery-mobile mobile modernizr

【解决方案1】：

你可以试试这个 php 库

https://code.google.com/p/php-mobile-detect/

或者这个用于 javascript

https://github.com/hgoebl/mobile-detect.js

【讨论】：

【解决方案2】：

如果您没有使用 jQuery UI 和 jQuery Mobile，那么 Twitter Bootstrap Fluid 布局可以很好地完成工作，而无需为不同的设备更改 HTML 或 CSS。您可以通过访问 Twitter Bootstrap 站点并将浏览器调整为不同的大小来轻松看到这一点。

您通常寻找的是所谓的responsive design。它基于 CSS 媒体查询和一点 Javascript，通常用于按摩 IE

【讨论】：

我可以做RWD的布局部分。我的具体问题是我想根据设备是移动设备/平板电脑/桌面设备来使用不同的 UI 小部件。
如果没有帮助，也许我应该删除我的答案？如果您使用引导程序，您可以清楚地看到它根据屏幕大小重新渲染小部件（即，当屏幕达到一定大小时，类似 facebook 的菜单按钮会显示）。我希望有人在投反对票之前只写评论。我很高兴删除答案。

【解决方案3】：

最简单的方法是检测您要定位的用户代理并加载适当的 javascript。

function load(src) {
  var doc = document,
    application = doc.createElement('script'),
    script = doc.getElementsByTagName('script')[0];
  application.type = 'text/javascript';
  application.async = true;
  application.src = src;
  script.parentNode.insertBefore(application, script);
}
load(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone|iemobile|tablet|Opera Mobi/i.test(navigator.userAgent) ? 'handheld.js' : 'desktop.js');

更好且成本更高的方法是让后端使用 wurl 进行内容协商，以便为台式机或手持设备提供适当的 (javascript) 资产（检查 is_wireless_device = true 对于手持设备）。

【讨论】：

我想使用特征检测，而不是浏览器嗅探。我不想每次新手机出来时都更新这个。
您要求的可能是设备而不是功能检测。如果我有一台连接到 2048x1536 和 264ppi 触摸屏的台式计算机，如果您检查功能，它将与视网膜 ipad 无法区分，因为两者具有相同的功能。这就是为什么您需要根据设备矩阵检查它并使用 wurfl，所有维护都将为您处理。
浏览器可以位于 navigator.userAgent 中，因此它不应该被信任，如果检测到设备功能与 iPad 相同，那么它应该获得与 ipad 相同的站点。缺少的是能够检测设备是否具有硬件键盘。这就是我所要求的。我意识到这可能不存在还，但我希望有一天它会。

【解决方案4】：

好的，我现在没有可以使用的设备来检查这个，但是要走的路是这样的：

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 乘以该比率）。

【讨论】：

我很喜欢你的想法。太棒了——太可悲了，一个人不能真正依赖你的代码。人们可能会想，HTML5、JS 和 CSS3，所有这些东西，最终会提供一种解决此类问题的方法。
看起来它没有在桌面上循环播放，所以它保持在 50。不过这个主意不错！
正如我所说：“哦，很高兴注意到这不适用于台式机，因此应额外检查最终 dpi 是否为 500，在这种情况下它是台式机系统”
我在 chrome 桌面上运行过，最终 dpi 是 50，而不是 500。
我刚刚在 iOS 设备上运行了一些额外的测试，似乎有必要动态插入样式表并编辑其内容，而不是使用 window.matchMedia 函数，但概述的技术是有效的（只需要添加更新和循环机制，我会这样做，并且可能会作为一个完整的脚本发布）。