11

我想要一个使用相同 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 的答案来检测以物理单位（英寸）为单位的设备宽度，并假设任何大于 11 英寸的东西都有键盘，但我敢打赌那里有一个巨大的平板电脑（或者谷歌将发布一个 nexus 12 平板电脑： ) 这会做出错误的假设。

4

4 回答 4

2

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

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

于 2013-03-07T13:03:06.760 回答
0

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

您通常寻找的是所谓的响应式设计。它基于 CSS 媒体查询和一点 Javascript，通常用于按摩 IE < 9 的废话以正确呈现。我喜欢 bootstrap 的另一个原因是它有一个庞大的社区来管理这种新设备的“按摩”，而不是你。

于 2013-03-12T17:24:19.763 回答
0

你可以试试这个 php 库

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

或者这个用于 javascript

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

于 2014-01-20T15:19:11.847 回答
-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 以用于手持设备）。

于 2013-03-11T11:40:05.293 回答