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

问题描述 投票:39回答:4

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

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

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

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

mobile desktop tablet modernizr device-detection
4个回答
38
投票

Modernizr可以检查触摸事件

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

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

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


45
投票

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

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

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

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


4
投票

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

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

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


-2
投票

这是对旧问题的后续回答,因为我认为“正确”答案随着时间的推移而改变。

  • 今天许多笔记本电脑都是触控功能
  • 新手机的分辨率高于大部分电脑显示器,同时仍然拥有明显更小的物理屏幕

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

© www.soinside.com 2019 - 2024. All rights reserved.