檢測手機與平板電腦

Question

有沒有辦法檢測用戶是使用平板電腦還是手機？ 例如，一個人使用平板電腦（任何版本為3+和iPad的安卓平板電腦）上網，他們肯定會喜歡查看與坐在桌面計算機上的人相同的未被剝離的版本。 而手機沖浪者肯定更喜歡網站的精簡版本，因為它加載速度更快，並且可能更容易用拇指導航。 這可以通過檢查此處找到的userAgent oct屏幕寬度來完成：

在jQuery中檢測移動設備的最佳方法是什么？

但問題來自像谷歌Galaxy Nexus這樣的手機，它具有與平板電腦相同的分辨率，但只有屏幕尺寸的一半。 在我看來，即使分辨率很高，顯示移動版也會更好，因為屏幕很小。

有沒有辦法檢測到這一點，還是我必須做出妥協？

Answer 1

我認為你在平板電腦，手機或任何其他支持網絡的設備之間進行了根本性的區分。 屏幕的物理尺寸似乎是您要用來指定所投放內容的指標。

在這種情況下，我將嘗試基於HTTP頭中的用戶代理傳遞的值（ [mobiforge.com ...] ）來實現邏輯，並優雅地降級以提示用戶信息是否不可用。

你的邏輯可能看起來像這樣：

• 如果用戶代理在HTTP標頭中提供物理屏幕大小
  物理尺寸= UA值。
  
• 否則，如果用戶代理提供分辨率和像素尺寸
  物理尺寸=像素尺寸除以分辨率。
• （可選）否則， 使用客戶端腳本來檢測分辨率和PPI
• 否則，如果用戶代理字符串看起來像某種移動設備（正則表達式）
  提示用戶選擇。
• 除此以外
  假設一個默認選項。

---

更新 ：我的答案現在已經三年了。 值得注意的是，對響應式設計的支持已經取得了顯着進展，現在常見的是向所有設備提供相同的內容，並依靠css媒體查詢以對其正在查看的設備最有效的方式呈現網站。

Answer 2

根據谷歌的建議： 在這里找到 （也由Greg引用）這是我之前在項目中使用的。

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

它可能不是最優雅的解決方案......但它確實起到了作用。

Answer 3

如果您使用Cordova，我喜歡這樣：

cordova plugin add uk.co.workingedge.phonegap.plugin.istablet

然后在你的代碼中的任何地方調用：

window.isTablet

Answer 4

如果您在理論上使用媒體查詢，則可以使用@media掌上電腦，但支持幾乎不存在。

識別高分辨率移動設備的最簡單方法是查看屏幕的DPI和設備像素比（目前通過webkit / mozilla供應商特定標簽）

@media (-webkit-max-device-pixel-ratio: 2),  
(max--moz-device-pixel-ratio: 2), 
(min-resolution: 300dpi) {
   ...
}

編輯：window.devicePixelRatio在JS中執行上述操作

這里有一篇很好的文章，里面有許多識別移動設備的想法。

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

Answer 5

不幸的是，截至目前，區分移動設備和平板電腦的唯一可靠方法是通過用戶代理字符串。

我還沒有找到包含設備尺寸的用戶代理。

如果您嘗試計算設備ppi，它們幾乎都不可避免地會出現96ppi，無論是桌面還是手機。

在用戶代理字符串中搜索iPad / iPod / iPhone以檢測任何Apple設備。 這將告訴您是否有Apple的平板電腦或手機/ iPod。 幸運的是，i-devices的口味要少得多，因此更容易區分它們。

要識別Android設備，請在用戶代理字符串中搜索“Android”。 要確定它是平板電腦還是手機，手機用戶代理（原生Android瀏覽器和Chrome）將包含“Mobile Safari”，而平板電腦只包含“Safari”。 Google推薦使用此方法：

作為移動網站的解決方案，我們的Android工程師建議在User-Agent字符串以及“android”中專門檢測“mobile”。

可以在這里找到更全面的描述：

http://googlewebmastercentral.blogspot.com/2011/03/mo-better-to-also-detect-mobile-user.html

當然這不是理想的，但看起來是唯一可靠的手段。 作為警告，通過查看用戶代理字符串的大樣本列表（接近一百個），我確實看到一個或兩個舊設備沒有正確地遵守“移動”與“移動Safari”的區別。

Answer 6

您可以使用Device Atlas之類的東西來檢測用戶代理的這些功能。 提供您可以自己托管的API，它們還提供雲服務。 兩者都是溢價（付費）

或者你可以使用像Wurfl這樣的東西，根據我的經驗，它不太准確。

Answer 7

為什么在你問他們時試着猜猜用戶有什么？ 您可以使用分辨率來猜測正在使用哪種設備，並詢問用戶他們想要的視圖，如果它屬於可能的移動設備或平板電腦類別。 如果你發現它錯了，那么這對用戶來說是一件麻煩事。 在我看來，他們曾經問過哪種類型的設備更方便。

Answer 8

我認為WURFL可能值得關注： http ：//wurfl.sourceforge.net/help_doc.php它更加硬核，因為它更多的服務器端解決方案，而不是簡單地通過簡單的媒體查詢（例如你自己的或使用類似Foundation CSS的框架或使用純javascript（adapt.js）。

比以下可以做的事情：

$is_wireless = ($requestingDevice->getCapability('is_wireless_device') == 'true');
$is_smarttv = ($requestingDevice->getCapability('is_smarttv') == 'true');
$is_tablet = ($requestingDevice->getCapability('is_tablet') == 'true');
$is_phone = ($requestingDevice->getCapability('can_assign_phone_number') == 'true');

if (!$is_wireless) {
 if ($is_smarttv) {
  echo "This is a Smart TV";
 } else {
  echo "This is a Desktop Web Browser";
 }
} else {
 if ($is_tablet) {
  echo "This is a Tablet";
 } else if ($is_phone) {
  echo "This is a Mobile Phone";
 } else {
  echo "This is a Mobile Device";
 }
}

參考： http ： //wurfl.sourceforge.net/php_index.php

或者在Java中：

WURFLHolder wurfl = (WURFLHolder) getServletContext().getAttribute(WURFLHolder.class.getName());
WURFLManager manager = wurfl.getWURFLManager();
Device device = manager.getDeviceForRequest(request);
String x = device.getCapability("is_tablet"); //returns String, not boolean btw

參考： http ： //wurfl.sourceforge.net/njava_index.php

Answer 9

正如許多其他海報所指出的那樣，您可能想要解析User-Agent請求標頭。 為此，我發現ua-parser-js庫非常有用。