检测手机与平板电脑

Question

有没有办法检测用户是使用平板电脑还是手机？例如,一个人使用平板电脑(任何版本为3+和iPad的安卓平板电脑)上网,他们肯定会喜欢查看与坐在桌面计算机上的人相同的未被剥离的版本.而手机冲浪者肯定更喜欢网站的精简版本,因为它加载速度更快,并且可能更容易用拇指导航.这可以通过检查此处找到的userAgent oct屏幕宽度来完成:

在jQuery中检测移动设备的最佳方法是什么？

但问题来自像谷歌Galaxy Nexus这样的手机,它具有与平板电脑相同的分辨率,但只有屏幕尺寸的一半.在我看来,即使分辨率很高,显示移动版也会更好,因为屏幕很小.

有没有办法检测到这一点,还是我必须做出妥协？

Answer 1

我认为你在平板电脑,手机或任何其他支持网络的设备之间进行了根本性的区分.屏幕的物理尺寸似乎是您要用来指定所投放内容的指标.

在这种情况下,我将尝试基于HTTP头中的用户代理传递的值([mobiforge.com ...])来实现逻辑,并优雅地降级以提示用户信息是否不可用.

你的逻辑可能看起来像这样:

• 如果用户代理在HTTP标头
  物理尺寸= UA值中提供物理屏幕大小.
  
• 否则,如果用户代理提供分辨率和像素尺寸,则
  物理尺寸=像素尺寸除以分辨率.
• (可选)否则,使用客户端脚本来检测分辨率和PPI
• 否则,如果用户代理字符串看起来像某种移动设备(正则表达式)
  提示用户选择.
• 否则
  假定默认选项.

更新:我的答案现在已经三年了.值得注意的是,对响应式设计的支持已经取得了显着进展,现在常见的是向所有设备提供相同的内容,并依靠css媒体查询以对其正在查看的设备最有效的方式呈现网站.

Answer 2

根据google的建议：在这里（也由Greg引用），这是我以前在项目中使用的内容。

if (/mobile/i.test(navigator.userAgent) && !/ipad|tablet/i.test(navigator.userAgent)) {
    console.log("it's a phone"); // your code here
}

这可能不是最优雅的解决方案……但是它确实可以做到。