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

Question

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

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

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

你认为这足以实现我想要的,或者你认为我应该测试其他功能吗？提前谢谢了.

Answer 1

这个问题有点老了,但当我用Google搜索时,我找不到更好的答案.

现在大多数台式机都支持触控功能,因此检测它是无关紧要的.

检测它们的最佳方法是按屏幕大小.

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

等等,什么？"现在大多数台式机都支持触摸"??? 你在哪里工作？ (30认同)
不,我的意思是硬件本身.我住在伦敦.几乎每台笔记本电脑都有触摸屏.对于大多数人来说,同样的PC也是如此. (12认同)
是的,真正的问题不再是屏幕分辨率...而是重要的__real world__尺寸......是4英寸或19英寸的设备...... (4认同)
视网膜显示器使这一点变得棘手,因为它在理论上具有与某些台式机相似的分辨率 (3认同)
我认为他意味着桌面计算机上运行的浏览器是支持触摸的,而不是桌面硬件本身. (2认同)
无论桌面触摸是否"正常",它仍然是一个东西,所以触摸!=移动.你应该同时使用触摸和尺寸. (2认同)
@Carlos Martinez所以我的MacBook Pro没有启用触摸功能,而且大多数人都在这里使用Mac,所以我不知道你在哪里看到大部分是触控功能.顺便说一句,我也住在伦敦 (2认同)

Answer 2

Modernizr可以检查触摸事件

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

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

请记住,现在很多现代台式电脑都有触摸屏,所以即使检测触摸支持也不能保证它是移动设备或平板电脑.

[DetectMobileBrowsers] [1]用[jQuery] [2]`if($.browser.mobile){//你的代码}`---用modernizr`if(Modernizr.touch){//你的代码}`[ modernizr touch documentation](http://modernizr.com/docs/#touch) (7认同)
但是,它也将Windows 8标记为"触摸".因此,如果您试图隐藏动画或限制带宽,则会在这种情况下发送误报. (5认同)
**Modernizr不会告诉您有关该设备的任何信息......只有浏览器.**有些设备的触摸屏运行浏览器,不支持触摸事件; 有些设备没有运行浏览器的触摸屏,支持触摸事件. - > https://github.com/Modernizr/Modernizr/issues/651#issuecomment-13939129 (3认同)

Answer 3

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

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

（在页面下方寻找“外形”。）