有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。

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


当前回答

很好的回答,谢谢。支持Windows phone和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";
}

其他回答

这些都是我所知道的吹嘘。如果您知道任何其他值,请帮助取消数组。

function ismobile(){
   if(/android|webos|iphone|ipad|ipod|blackberry|opera mini|Windows Phone|iemobile|WPDesktop|XBLWP7/i.test(navigator.userAgent.toLowerCase())) {
       return true;
   }
   else
    return false;
}

对我来说,小是美丽的,所以我使用这种技巧:

在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媒体查询根据屏幕大小显示/隐藏元素。

例如,在我的移动版本中,我不想激活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

我仍在开发手机版,所以在写这篇文章时,它仍然看起来不像应该的样子。

由dekin88更新

有一个内置的JavaScript API用于检测媒体。不使用上述解决方案,只需使用以下方法:

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

浏览器支持:http://caniuse.com/#feat=matchmedia

这种方法的优点是,它不仅简单、更短,而且如果需要,您可以有条件地分别针对不同的设备,如智能手机和平板电脑,而无需在DOM中添加任何虚拟元素。

如果发现仅检查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...
}
var device = {
  detect: function(key) {
    if(this['_'+key] === undefined) {
      this['_'+key] = navigator.userAgent.match(new RegExp(key, 'i'));
    }
    return this['_'+key];
  },
  iDevice: function() {
    return this.detect('iPhone') || this.detect('iPod');
  },
  android: function() {
    return this.detect('Android');
  },
  webOS: function() {
    return this.detect('webOS');
  },
  mobile: function() {
    return this.iDevice() || this.android() || this.webOS();
  }
};

我过去用过类似的东西。这与之前的响应类似,但它在技术上更具性能,因为它缓存匹配结果,尤其是在动画、滚动事件等中使用检测时。

如果你说的“移动”是指“小屏幕”,我用这个:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

在iPhone上,你会得到一个320的window.screen.width。在Android上,你将得到一个窗口.outerWidth为480(尽管这取决于Android)。iPad和Android平板电脑将返回768这样的数字,这样它们就能像你想要的那样获得完整的视图。