41

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

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

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

你认为这足以实现我想要的,还是你认为我应该测试其他能力?提前谢谢了。

4

4 回答 4

46

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

现在大多数桌面都启用了触摸功能,因此检测它是无关紧要的。

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

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

于 2013-05-10T12:26:01.590 回答
43

Modernizr可以检查触摸事件

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

Modernizr 只是测试浏览器是否支持某些功能。据我所知,它似乎并没有browser_type == mobile按照这些思路进行测试和填充......

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

于 2011-12-02T18:12:51.473 回答
5

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

或者(没有 Modernizr)你可以使用 Restive.JS 在你的身体中添加一个“.phone”或“.tablet”类:http: //docs.restivejs.com

(在页面下方查找“formfactor”。)

于 2014-03-18T10:59:13.920 回答
-1

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

  • 如今,许多笔记本电脑都启用了触控功能
  • 较新的手机具有比大多数计算机显示器更高的分辨率,同时仍然具有明显更小的物理屏幕

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

于 2018-09-12T14:28:26.660 回答