使用 Modernizr 测试平板电脑和移动设备 - 征求意见答案

【问题标题】：Using Modernizr to test for tablet and mobile - Opinions wanted使用 Modernizr 测试平板电脑和移动设备 - 征求意见
【发布时间】：2011-12-17 05:03:48
【问题描述】：

我想使用 Modernizr 检测用户是否在台式机、平板电脑或移动设备上查看网站。

我最初的想法显然是检查对于移动设备和更大的台式机来说应该足够的屏幕尺寸。对于屏幕尺寸也可以等于小桌面屏幕 (1024 x 768) 的平板设备，我也会测试触摸事件。

此时，我想专注于移动/平板设备，正如 jQuery mobile 所说，它是 A 级设备。我不希望利用任何特定的移动设备功能，只需检测桌面、平板电脑或移动设备，并根据测试结果附加 CSS 类，为每个设备提供定制的 UI。

您认为这足以实现我想要的还是您认为我应该测试其他功能？非常感谢。

【问题讨论】：

【解决方案1】：

这个问题有点老了，但是当我用谷歌搜索时找不到更好的答案。

现在大多数桌面都支持触控，因此检测它是无关紧要的。

检测它们的最佳方法是通过屏幕尺寸。

使用 Modernizr，您可以使用 if (Modernizr.mq('only all and (max-width: 480px)')) { ...}

【讨论】：

【解决方案2】：

Modernizr 可以检查触摸事件

为了测试设备是平板电脑、手机还是台式机，我可能更倾向于使用用户代理。看看DetectMobileBrowsers.com上的脚本

Modernizr 只是测试浏览器是否支持某些功能。据我所知，它似乎没有测试browser_type == mobile 和类似的东西......

请记住，如今许多现代台式电脑都有触摸屏，因此即使检测到触摸支持也不能保证它是移动设备或平板电脑。

【讨论】：

[DetectMobileBrowsers][1] 使用 [jQuery][2] if($.browser.mobile){// your code} --- 使用modernizr if ( Modernizr.touch ) { // your code} modernizr touch documentation
但是，它也将 Windows 8 标记为“触摸”。因此，如果您试图隐藏动画或限制带宽，它会在这种情况下发送误报。
还有一些关于 Modernizr.touch 返回 true 的 firefox 问题
Modernizr 不会告诉您有关设备的任何信息……只有浏览器。 有些设备带有运行不支持触摸事件的浏览器的触摸屏；有些设备没有运行支持触摸事件的浏览器的触摸屏。 -> github.com/Modernizr/Modernizr/issues/651#issuecomment-13939129
怎么没有人将这些组合成一个单一的解决方案？

【解决方案3】：

您可以为 Modernizr 使用以下扩展： https://www.npmjs.org/package/mobile-detect

或者（没有 Modernizr）你可以使用 Restive.JS 为你的身体添加一个“.phone”或“.tablet”类： http://docs.restivejs.com

（在页面下方查找“formfactor”。）

【讨论】：

【解决方案4】：

这是对一个老问题的后续回答，因为我相信“正确”的答案会随着时间而改变。

我发现解决此问题的最佳方法是通过将屏幕的 DPI 与屏幕尺寸（以像素为单位）相乘来计算物理屏幕尺寸。

【讨论】：

在许多设备（移动）硬件像素！= 软件像素。这就是为什么即使手机的硬件显示分辨率可以达到 1080 x 2340 像素，但手机浏览器会将其视为 393 x 665 像素，这将导致更大的元素和更详细的字体。