如何使用 jquery 检测浏览器是 iOS、android 还是桌面？

Posted 2023-05-06

【中文标题】如何使用 jquery 检测浏览器是 iOS、android 还是桌面？

【英文标题】：How to detect whether browser is iOS, android or desktop using jquery?

【发布时间】：2015-12-10 18:22:30

【问题描述】：

我们的想法是制作一个按钮，上面写着“立即获取应用程序”，其中的链接会根据其是否为 android 手机 iPhone 进行更改。我通过 stackexchange 寻找答案，但对于没有 js 经验的人来说，一切都不清楚

【参考方案1】：

试试这个，

未知是台式机还是其他手机

function getMobileOperatingSystem() 
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

  if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
  
    return 'ios';

  
  else if( userAgent.match( /Android/i ) )
  

    return 'Android';
  
  else
  
    return 'unknown'; 
  

来源：Detecting iOS / Android Operating system

【参考方案2】：

//检查设备是移动设备还是桌面设备。

if(jQuery.browser.mobile)

   console.log('You are using a mobile device!');

else

   console.log('You are not using a mobile device!');

//检测iPad

var isiPad = /ipad/i.test(navigator.userAgent.toLowerCase());
if (isiPad)

  ...

//检测iPhone

var isiPhone = /iphone/i.test(navigator.userAgent.toLowerCase());
if (isiPhone)

  ...

//检测 iPod

var isiPod = /ipod/i.test(navigator.userAgent.toLowerCase());
if (isiPod)

  ...

//检测设备

var isiDevice = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());

if (isiDevice)

  ...

//检测安卓

var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());

if (isAndroid)

  ...

//检测黑莓

var isBlackBerry = /blackberry/i.test(navigator.userAgent.toLowerCase());

if (isBlackBerry)

  ...

//检测WebOs

var isWebOS = /webos/i.test(navigator.userAgent.toLowerCase());

if (isWebOS)

  ...

//检测Windows Phone

var isWindowsPhone = /windows phone/i.test(navigator.userAgent.toLowerCase());
if (isWindowsPhone)

  ...

上述代码是我在以下链接中找到的。 https://www.sitepoint.com/detect-mobile-devices-jquery/

【参考方案3】：

来自Tom Landau in js

/**
 * @summary
 * utils.isMobile
 * --------------
 * @desc
 * Creates a global object with member functions that test if the client's browser 
 * belongs to a specific family of devices.
 * @function utils.isMobile
 * @return Boolean
 * @see @link https://***.com/questions/32570067/how-to-detect-whether-browser-is-ios-android-or-desktop-using-jquery, 
 * @link https://bitsrc.io/tomlandau/simple-js/global/is-mobile/code#src/global/isMobile.js
 */
utils = window.utils || ;
utils.isMobile = 
   getUserAgent: function() 
      return navigator.userAgent;
   ,
   Android: function() 
      return /Android/i.test(this.getUserAgent()) && !this.Windows();
   ,
   BlackBerry: function() 
      return /BlackBerry|BB10|PlayBook/i.test(this.getUserAgent());;
   ,
   iPhone: function() 
      return /iPhone/i.test(this.getUserAgent()) && !this.iPad() && !this.Windows();
   ,
   iPod: function() 
      return /iPod/i.test(this.getUserAgent());
   ,
   iPad: function() 
      return /iPad/i.test(this.getUserAgent());
   ,
   iOS: function() 
      return (this.iPad() || this.iPod() || this.iPhone());
   ,
   Opera: function() 
      return /Opera Mini/i.test(this.getUserAgent());
   ,
   Windows: function() 
      return /Windows Phone|IEMobile|WPDesktop/i.test(this.getUserAgent());
   ,
   KindleFire: function() 
      return /Kindle Fire|Silk|KFAPWA|KFSOWI|KFJWA|KFJWI|KFAPWI|KFAPWI|KFOT|KFTT|KFTHWI|KFTHWA|KFASWI|KFTBWI|KFMEWI|KFFOWI|KFSAWA|KFSAWI|KFARWI/i.test(this.getUserAgent());
   ,
   any: function() 
      return (this.Android() || this.BlackBerry() || this.iOS() || this.Opera() || this.Windows());
   
;

照常测试：if(utils.isMobile.any())... 或 if(utils.isMobile.Android())...。