在jQuery中检测移动设备的最佳方法是什么？-Java 学习之路

1420

有没有一种可靠的方法来检测用户是否在jQuery中使用移动设备？类似于CSS @media属性的东西？如果浏览器在手持设备上，我想运行不同的脚本 .

jQuery $.browser 函数不是我想要的 .

30 回答

433
我知道这个问题有很多答案，但从我看到的人没办法解决这个问题 .

CSS使用width（媒体查询）来确定基于宽度应用于Web文档的样式 . 为什么不在JavaScript中使用宽度？

例如，在Bootstrap的（移动优先）媒体查询中，存在4个快照/中断点：
- 超小型设备是768像素及以下 .
- 小型设备的范围为768至991像素 .
- 中等设备范围从992到1199像素 .
- 大型设备是1200像素及以上 .
我们也可以使用它来解决我们的JavaScript问题 .

首先，我们将创建一个获取窗口大小的函数，并返回一个值，该值允许我们查看设备正在查看我们的应用程序的大小：
```
var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};
```
现在我们已经设置了函数，我们可以调用它来存储值：
```
var device = getBrowserWidth();
```
你的问题是

如果浏览器在手持设备上，我想运行不同的脚本 .

现在我们有了设备信息，剩下的就是if语句：
```
if(device === "xs"){
  // Enter your script for handheld devices here 
}
```
以下是CodePen的示例：http://codepen.io/jacob-king/pen/jWEeWG
回复于 2024-04-29T00:54:38+08:00
20
```
<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>
```
如果您转到任何浏览器，如果您尝试获取navigator.userAgent，那么我们将获得如下的浏览器信息

Mozilla / 5.0（Macintosh; Intel Mac OS X 10_13_1）AppleWebKit / 537.36（KHTML，与Gecko一样）Chrome / 64.0.3282.186 Safari / 537.36

如果你在移动设备上做同样的事情，你将会得到关注

Mozilla / 5.0（Linux; Android 8.1.0; Pixel Build / OPP6.171019.012）AppleWebKit / 537.36（KHTML，与Gecko一样）Chrome / 61.0.3163.98 Mobile Safari / 537.36

每个移动浏览器都会使用带有 "Mobile" 字符串的useragent，所以我会做所需的更改 .
回复于 2024-04-29T00:54:38+08:00
41
如果用“手机”你的意思是“小屏幕”，我用这个：
```
var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;
```
在iPhone上，你最终会得到一个window.screen.width为320.在Android上，你最终会得到一个window.outerWidth为480（虽然这可能取决于Android） . iPad和Android平板电脑将返回768这样的数字，因此它们可以像您想要的那样获得完整视图 .
回复于 2024-04-29T00:54:38+08:00

用户代理字符串不应单独受信任 . 以下解决方案适用于所有情况 .

function isMobile(a) {
  return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)));
}

并调用此函数：

isMobile(navigator.userAgent || navigator.vendor || window.opera)

回复于 2024-04-29T00:54:38+08:00

看看这个post，它提供了一个非常好的代码片段，用于检测触摸设备时的操作或调用touchstart事件时该怎么办：

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

回复于 2024-04-29T00:54:38+08:00

用这个：

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

然后用这个：

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

回复于 2024-04-29T00:54:38+08:00

5
在一行javascript中：
```
var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
```
如果用户代理包含“Mobi”（根据MDN）并且ontouchstart可用，则它可能是移动设备 .
回复于 2024-04-29T00:54:38+08:00
15
根据Mozilla - Browser detection using the user agent：

总之，我们建议在用户代理中的任何位置查找字符串“Mobi”以检测移动设备 .

像这样：
```
if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}
```
这将匹配所有常见的移动浏览器用户代理，包括移动Mozilla，Safari，IE，Opera，Chrome等 .

Update for Android

EricL建议也测试 Android 作为用户代理，因为平板电脑的Chrome user agent string不包括"Mobi"（但是手机版本也是如此）：
```
if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}
```
回复于 2024-04-29T00:54:38+08:00
10
你不能依赖 navigator.userAgent ，不是每个设备都显示它的真实操作系统 . 例如，在我的HTC上，它取决于设置（"using mobile version"开/关） . 在http://my.clockodo.com，我们只是使用 screen.width 来检测小型设备 . 不幸的是，在某些Android版本中，screen.width存在一个错误 . 您可以将此方式与userAgent结合使用：
```
if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}
```
回复于 2024-04-29T00:54:38+08:00
78

mobiledetect.net怎么样？

其他解决方案似乎太基础 . 这是一个轻量级的PHP类 . 它使用User-Agent字符串与特定HTTP标头相结合来检测移动环境 . 您还可以使用任何可用于第三方插件的Mobile Detect：WordPress，Drupal，Joomla，Magento等 .

回复于 2024-04-29T00:54:38+08:00
5

想要检测移动设备，你正在做的事情与IMO的概念有点过于接近 . 进行一些特征检测可能要好得多 . 像http://www.modernizr.com/这样的图书馆可以提供帮助 .

例如，移动和非移动之间的界限在哪里？它每天变得越来越模糊 .

回复于 2024-04-29T00:54:38+08:00
7
对我来说小小是美丽的所以我正在使用这种技术：

在CSS文件中：
```
/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}
```
在jQuery / JavaScript文件中：
```
$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });
```
我的目标是让我的网站“移动友好” . 所以我使用CSS Media Queries根据屏幕大小显示/隐藏元素 .

例如，在我的移动版本中，我不想激活Facebook Like Box，因为它会加载所有这些配置文件图像和内容 . 这对移动访问者来说并不好 . 所以，除了隐藏容器元素之外，我还在jQuery代码块（上面）中执行此操作：
```
if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}
```
你可以在行动中看到它http://lisboaautentica.com

我还在研究移动版本，所以它仍然没有看起来应该如此 .

Update by dekin88

内置了一个用于检测媒体的JavaScript API . 而不是使用上述解决方案，只需使用以下内容：
```
$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
        //Conditional script here
    }
 });
```
Browser Supports: http://caniuse.com/#feat=matchmedia

这种方法的优点是它不仅更简单，而且更短，但如果需要，您可以有条件地针对不同的设备（如智能手机和平板电脑），而无需在DOM中添加任何虚拟元素 .
回复于 2024-04-29T00:54:38+08:00
5
一个简单而有效的单线程：
```
function isMobile() { return ('ontouchstart' in document.documentElement); }
```
但是上面的代码没有考虑带触摸屏的笔记本电脑的情况 . 因此，我提供了第二个版本，基于@Julian solution：
```
function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}
```
回复于 2024-04-29T00:54:38+08:00
196
所有答案都使用user-agent来检测浏览器，但是基于用户代理的设备检测不是很好的解决方案，更好的是检测触摸设备等功能（在新的jQuery中他们删除 $.browser 并使用 $.support 代替） .

要检测移动设备，您可以检查触摸事件：
```
function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}
```
摘自What's the best way to detect a 'touch screen' device using JavaScript?
回复于 2024-04-29T00:54:38+08:00

知道 TouchEvent 仅适用于移动设备，也许最简单的方法是检查用户设备是否可以支持它：

function isMobile() {
  try { 
       document.createEvent("TouchEvent"); 
       return true; 
     }
  catch(e) { 
       return false; 
     }
}

回复于 2024-04-29T00:54:38+08:00

您可以使用简单的JavaScript来检测它，而不是使用jQuery：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

或者你可以将它们结合起来，使它更容易通过jQuery访问...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

现在 $.browser 将为所有上述设备返回 "device"

注意： $.browser 已删除jQuery v1.9.1 . 但你可以通过使用jQuery迁移插件Code来使用它

更彻底的版本：

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

回复于 2024-04-29T00:54:38+08:00

12
我建议你退房http://wurfl.io/

简而言之，如果您导入一个小的JavaScript文件：
```
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
```
您将看到一个类似于以下内容的JSON对象：
```
{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}
```
（假设您正在使用Nexus 7），您将能够执行以下操作：
```
if(WURFL.is_mobile) {
    //dostuff();
}
```
这就是你要找的 .

免责声明：我为提供此免费服务的公司工作 .
回复于 2024-04-29T00:54:38+08:00
61

如果您不是特别担心小型显示器，可以使用宽度/高度检测 . 因此，如果宽度低于一定大小，移动站点就会被抛出 . 它可能不是完美的方式，但它可能是最容易检测多个设备 . 您可能需要为iPhone 4（大分辨率）添加特定的一个 .

回复于 2024-04-29T00:54:38+08:00

很好的回答谢谢 . 支持Windows手机和Zune的小改进：

if (navigator.userAgent.match(/Android/i) ||
             navigator.userAgent.match(/webOS/i) ||
             navigator.userAgent.match(/iPhone/i) ||
             navigator.userAgent.match(/iPad/i) ||
             navigator.userAgent.match(/iPod/i) ||
             navigator.userAgent.match(/BlackBerry/) || 
             navigator.userAgent.match(/Windows Phone/i) || 
             navigator.userAgent.match(/ZuneWP7/i)
             ) {
                // some code
                self.location="top.htm";
               }

回复于 2024-04-29T00:54:38+08:00

这是一个函数，您可以使用它来获得关于您是否在移动浏览器上运行的真/假答案 . 是的，这是浏览器嗅探，但有时这正是你需要的 .

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}

回复于 2024-04-29T00:54:38+08:00

1802

您也可以像下面一样检测它

$.isIPhone = function(){
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));

};
$.isIPad = function (){
    return (navigator.platform.indexOf("iPad") != -1);
};
$.isAndroidMobile  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && ua.indexOf("mobile");
};
$.isAndroidTablet  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && !(ua.indexOf("mobile"));
};

回复于 2024-04-29T00:54:38+08:00

3
我建议使用以下字符串组合来检查是否使用了设备类型 .

根据Mozilla documentation建议使用字符串 Mobi . 但是，如果仅使用 Mobi ，一些旧平板电脑不会返回true，因此我们也应该使用 Tablet 字符串 .

同样，为了安全起见， iPad 和 iPhone 字符串也可用于检查设备类型 .

大多数新设备仅为 Mobi 字符串返回 true .
```
if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}
```
回复于 2024-04-29T00:54:38+08:00
6
如果发现只检查 navigator.userAgent 并不总是可靠的 . 通过检查 navigator.platform 可以实现更高的可靠性 . 对先前答案的简单修改似乎更好：
```
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}
```
回复于 2024-04-29T00:54:38+08:00

基于http://detectmobilebrowser.com/的简单功能

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4));
}

回复于 2024-04-29T00:54:38+08:00

有时需要知道客户端使用哪个品牌设备才能显示特定于该设备的内容，例如指向iPhone商店或Android市场的链接 . Modernizer很棒，但只显示浏览器功能，如HTML5或Flash .

这是我在jQuery中的UserAgent解决方案，为每种设备类型显示不同的类：

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

此解决方案来自Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

回复于 2024-04-29T00:54:38+08:00

46
令我感到惊讶的是，没有人指出一个不错的网站：http://detectmobilebrowsers.com/它有不同语言的现成代码用于移动检测（包括但不限于）：
- Apache
- ASP
- C＃
- IIS
- JavaScript
- NGINX
- PHP
- Perl
- Python
- Rails
如果您还需要检测平板电脑，只需查看关于部分的其他RegEx参数 .

Android平板电脑，iPad，Kindle Fires和PlayBooks未被设计检测到 . 要添加对平板电脑的支持，请将| android | ipad | playbook | silk添加到第一个正则表达式中 .
回复于 2024-04-29T00:54:38+08:00

要添加额外的控制层，我使用HTML5存储来检测它是使用移动存储还是桌面存储 . 如果浏览器不支持存储，我有一系列移动浏览器名称，我将用户代理与阵列中的浏览器进行比较 .

这很简单 . 这是功能：

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}

回复于 2024-04-29T00:54:38+08:00

6

这不是jQuery，但我发现了这个：http://detectmobilebrowser.com/

它提供了以多种语言检测移动浏览器的脚本，其中一种是JavaScript . 这可能会帮助你找到你想要的东西 .

但是，由于您使用的是jQuery，因此您可能需要注意jQuery.support集合 . 它是用于检测当前浏览器功能的一组属性 . 文档在这里：http://api.jquery.com/jQuery.support/

由于我不知道你想要完成什么，我不知道哪一个最有用 .

所有这一切，我认为最好的办法是使用服务器端语言（如果这是一个选项）将不同的脚本重定向或写入输出 . 由于您并不真正了解移动浏览器x的功能，因此在服务器端执行检测和更改逻辑将是最可靠的方法 . 当然，如果你不能使用服务器端语言，所有这一切都没有实际意义:)

回复于 2024-04-29T00:54:38+08:00

找到了解决方案：http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

然后验证它是否为Mobile，您可以使用以下方法进行测试：

if(isMobile.any()) {
   //some code...
}

回复于 2024-04-29T00:54:38+08:00

4
如果使用Modernizr，则很容易使用前面提到的 Modernizr.touch .

但是，为了安全起见，我更喜欢使用 Modernizr.touch 和用户代理测试的组合 .
```
var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }
```
如果你不使用Modernizr，你可以简单地用 ('ontouchstart' in document.documentElement) 替换上面的 Modernizr.touch 函数

另请注意，测试用户代理 iemobile 将为您提供比 Windows Phone 更广泛的检测到的Microsoft移动设备 .

Also see this SO question
回复于 2024-04-29T00:54:38+08:00

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

30 回答

相关问题