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

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

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

#1楼

对我来说，小就是美丽，所以我正在使用这种技术：

在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上看到它的运行情况

我仍在开发移动版本，因此截至撰写本文时，它仍未达到应有的状态。

由dekin88更新

内置了一个JavaScript API，用于检测媒体。而不是使用上述解决方案，只需使用以下内容：

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

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

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

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

#2楼

如果“移动”是指“小屏幕”，则使用以下代码：

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之类的数字，因此它们将获得所需的完整视图。

#3楼

在以下位置找到了解决方案： 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());
    }
};

然后，要验证其是否为移动设备，可以使用以下方法进行测试：

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

#4楼

如果发现仅检查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...
}

#5楼

您也可以如下检测

$.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"));
};

来源：https://my.oschina.net/stackoom/blog/3138545

标签

iphone

黑莓

android

ipad