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

Posted 2023-02-25

【中文标题】使用 Modernizr 测试平板电脑和移动设备 - 征求意见

【英文标题】：Using Modernizr to test for tablet and mobile - Opinions wanted

【发布时间】：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)')) ...

【讨论】：

Retina 显示器让这变得很棘手，因为理论上它的分辨率与某些台式机相似

是的，真正的问题不再是屏幕分辨率......而是真实世界尺寸很重要......设备是 4 英寸还是 19 英寸......跨度>

我认为他的意思是在桌面机器上运行的浏览器是支持触控的，而不是桌面硬件本身。

不，我指的是硬件本身。我住在伦敦。现在几乎每台笔记本电脑都有触摸屏。大多数多合一 PC 也是如此。

无论桌面触摸是否“正常”，它仍然是一回事，所以触摸！= 移动。您应该同时使用触摸和大小。

【参考方案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”。）

【讨论】：

UA Parser 对于移动检测只有 12K 和 37K。

restivejs.com 已死。

【参考方案4】：

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

如今许多笔记本电脑都支持触控 较新的手机比市面上的大部分电脑显示器具有更高的分辨率，但物理屏幕仍然小得多

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

【讨论】：

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