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错误：

我想我真正需要的是一种检测设备是否能够触摸以及是否具有硬件键盘的方法。我可以使用David Mulder's answer for detecting device width in physical units (inches)作为代理，并假设任何＆gt; 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乘以该比率）。

Answer 2

如果你没有与jQuery UI和jQuery Mobile结合，那么Twitter Bootstrap Fluid布局做得相当不错，不必为不同的设备更改HTML或CSS。您可以通过访问Twitter Bootstrap网站并将浏览器重新调整为不同大小来轻松查看。

您一般所寻求的是所谓的responsive design。它基于CSS媒体查询和一些小的Javascript通常按摩IE的垃圾＆lt; 9正确渲染。我喜欢bootstrap的另一个原因是它有一个巨大的社区来管理这种“按摩”新设备而不是你。

Answer 3

你可以尝试这个php库

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

或者这个用于javascript

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

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）。

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

4 个答案: