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

时间:2011-10-28 10:42:45

标签: mobile desktop tablet modernizr device-detection

我想使用Modernizr来检测用户是否在桌面设备,平板电脑或移动设备上查看网站。

我最初的第一个想法显然是检查屏幕尺寸应该足够用于移动设备以及更大的桌面。对于屏幕尺寸也可能与小型桌面屏幕(1024 x 768)相同的平板电脑设备,我也会测试触控事件。

目前我想专注于移动/平板电脑设备,就像jQuery mobile所说的那样,A级。我不打算使用任何特定的移动设备功能,只需检测桌面,平板电脑或移动设备,并根据测试结果附加CSS类,为每个设备提供量身定制的UI。

你认为这足以实现我想要的,或者你认为我应该测试其他功能吗?非常感谢提前。

4 个答案:

答案 0 :(得分:45)

这个问题有点陈旧,但当我用Google搜索时,我找不到更好的答案。

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

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

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

答案 1 :(得分:38)

Modernizr可以检查触摸事件

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

上的脚本

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

请记住,现在很多现代台式电脑都配有触摸屏,因此即使检测到触控支持也无法保证它是移动设备或平板电脑。

答案 2 :(得分:4)

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

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

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

答案 3 :(得分:-2)

这是对一个旧问题的后续解答,因为我认为“正确”答案已随时间而改变。

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

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