如何在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英寸的设备都有键盘，但我敢打赌，那里会有一款巨大的平板电脑（或者Google将发布一个nexus 12平板电脑：）其中这将是错误的假设。

- Sam Hasler

---

现在有很多移动设备，即使是最流行的设备其屏幕宽度也千差万别。检测触摸事件并不是处理问题的正确方法。标准做法是根据屏幕宽度提供不同的响应式布局。 - Blazemonger

@Blazemonger，我知道如何进行响应式设计。但我更感兴趣的是，根据输入设备是手机、平板还是桌面电脑，应用不同的jQuery（或Vanilla JavaScript）组件/小部件到输入框中。一个组件可能更适合在移动设备上使用下拉菜单输入日期，而平板电脑上则可以显示具有更大触摸区域的日历，桌面电脑上则可以解释文本输入，如“明天”或“下周三”。 - Sam Hasler

问题在于现在已经没有明确的方法来区分智能手机、平板电脑和台式机了。微软Surface和华硕Transformer都是平板电脑和台式机；Kindle或Galaxy Note介于智能手机和平板电脑之间。现在没有任何有意义的方法来区分这三个类别。你需要决定你真正想要区分的是什么，并对其进行衡量。 - Blazemonger

https://dev59.com/-2Yr5IYBdhLWcg3w8-gz - Blazemonger

@Joshua 我以为我已经做到了。我想要能够检测出：1. 它是一个触摸设备吗？2. 这个设备是否有硬件键盘？ - Sam Hasler

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

- David Mulder

---

我非常喜欢你的想法。太棒了 - 可惜人们不能真正依赖你的代码。人们可能会认为，HTML5、JS和CSS3这些东西最终会提供一种解决这类问题的方法。 - Joshua

看起来在桌面上没有循环，所以它停留在50。不过这个想法很棒！ - Sam Hasler

就像我说的：“哦，需要注意的是这个方法在桌面系统上不起作用，所以需要额外检查最终的dpi是否为500，如果是，则为桌面系统。” - David Mulder

我已在 Chrome 桌面版上运行它，最终 DPI 为 50，而不是 500。 - Sam Hasler

facepalm，是的，你说得完全正确，我记错了并且误读了你的评论... - David Mulder

我刚在iOS设备上运行了一些额外的测试，似乎需要动态插入样式表并编辑其内容，而不是使用 window.matchMedia 函数。但是，所述技术是可用的（只需添加更新和循环机制，我将这样做，并可能发布为完整的脚本）。 - David Mulder

Answer 2

如果你不一定非要使用 jQuery UI 和 jQuery Mobile，那么 Twitter Bootstrap可以通过流式布局很好地适配不同的设备，而不需要更改HTML或CSS。你可以轻松地进入 Twitter Bootstrap 网站并将浏览器调整到不同的大小来查看。

通常所说的是响应式设计，它基于 CSS 媒体查询和一些 JavaScript 代码，用来使 IE < 9 正确渲染网页。我喜欢 Bootstrap 的另一个原因是它有一个庞大的社区来管理新设备的适配，而不是由你自己来处理。

- Adam Gent

---

我可以完成RWD的布局部分。我的具体问题是，我想根据设备是手机/平板电脑/桌面电脑使用不同的UI小部件。 - Sam Hasler

如果我的回答没有帮助的话，也许我应该把它删除？如果你使用Bootstrap，你可以清楚地看到它根据屏幕大小重新渲染控件（例如，当屏幕达到一定尺寸时，Facebook点赞菜单按钮会显示）。我希望有人在投票之前写个评论。如果需要的话，我很乐意删除这个回答。 - Adam Gent

Answer 3

你可以尝试使用这个 PHP 库。

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

或者对于JavaScript使用这个

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

- ejectamenta

Answer 4

最简单的方法是检测您想要针对的用户代理并加载适当的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）。

- del

---

我想使用特性检测，而不是浏览器嗅探。我不想每次有新手机推出时都要更新它。 - Sam Hasler

你所要求的可能是设备检测而不是功能检测。如果我有一台桌面电脑，连接着一个2048x1536和264ppi的触摸屏幕，如果你检查功能，它将与视网膜iPad无法区分，因为两者具有相同的功能。这就是为什么你需要根据设备矩阵进行检查，并使用wurfl，所有维护工作都将由它来处理。 - del

浏览器中的navigator.userAgent可能会误导，因此不应该被信任。如果设备功能检测到与iPad相同，则应该将其视为iPad并显示相应网站。现在缺少的是能够检测设备是否具有硬件键盘的功能。这就是我所要求的。我意识到这可能目前还不存在，但我希望有一天它会出现。 - Sam Hasler