检测手机和平板电脑 [英] Detect phone vs tablet

问题描述

有没有办法检测用户是否使用平板电脑或手机？
作为一个例子，一个人使用平板电脑（任何安卓平板电脑版本3+和iPad）上网，他们一定会喜欢查看相同的没有拆卸的版本作为坐在一台台式电脑的人。和一个电话冲浪者肯定会喜欢的网站，因为它的加载更快，可能更容易用拇指导航。
这可以通过检查userAgent oct屏幕宽度在这里找到：

但是问题出在手机上像Google Galaxy Nexus具有与平板电脑相同的分辨率，但只有一半的屏幕尺寸。在我看来，展示移动版本会更好，因为屏幕很小，即使分辨率很高。

有没有办法检测到这种情况或者我必须作出妥协吗？

解决方案

我认为您在这里对平板电脑，手机或任何其他支持网络的设备进行了根本性的任意区分。看起来屏幕的物理尺寸是您要用于指定您投放内容的指标。

在这种情况下，我会尝试基于值来实现逻辑由用户代理在HTTP标头中传递（ [mobiforge.com ...]

您的逻辑可能看起来有点像这样：

• 如果用户代理在HTTP标头中提供物理屏幕大小
  
  物理尺寸= UA值。
  


• 否则，如果用户代理提供分辨率和像素尺寸
  
  物理尺寸=像素尺寸除以分辨率。


• （可选）否则使用客户端脚本来检测解析度和PPI


• 否则，如果用户代理字符串看起来像某种移动设备（正则表达式）
  
  提示用户选择


• ，否则
  
  假设为默认选项。

---

更新：
我的答案是现在三岁。值得注意的是，对响应式设计的支持已经取得了巨大的进步，它现在常见的是向所有设备提供相同的内容，并依靠css媒体查询以对于正在被观看的设备最有效的方式呈现网站。 / p>

Is there a way to detect if the user is using a tablet or a phone? As an example a person surfing the web using a tablet (any android tablet with version 3+ and iPad) they would surely like to view the same not stripped down version as a person sitting with a desktop computer. And a phone surfer would surely prefer the stripped down version of the site because its quicker to load and might be easier to navigate with your thumb. This could be done with checking userAgent oct screen width found here:

best way to detect handheld device in jQuery

But the problem comes with a phone like Google Galaxy Nexus which has the same resolution as a tablet but only half the screen size. In my opinion it would be nicer to show the mobile version since the screen is small even though the resolution is high.

Is there a way to detect this or do I have to make a compromise?

解决方案

I think you're making a fundamentally arbitrary distinction between tablet, phone, or any other web enabled device here. It seems like the physical dimensions of the screen is the metric you want to use to dictate the content you serve.

In this case I would try to implement logic based on values passed by the user agent in the HTTP headers ([mobiforge.com...]) and degrade gracefully to prompting the user if information isn't available.

Your logic might look a bit like this:

• If the user agent supplies a physical screen size in HTTP headers
  physical dimensions = UA value.
  
• otherwise, if the user agent supplies a resolution and pixel dimensions
  physical dimensions = pixel dimensions divided by resolution.
• (optionally) otherwise, use client side script to detect resolution and PPI
• otherwise, if the user agent string looks like some kind of mobile device (regex)
  prompt the user to select.
• otherwise
  assume a default option.

---

Update: My answer is now three years old. It's worth noting that support for responsive design has progressed significantly and its now common to deliver the same content to all devices and rely on css media queries to present the site in a way that is most effective for the device it is being viewed on.

这篇关于检测手机和平板电脑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！