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

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


当前回答

navigator.userAgentData.mobile返回[true|false]

其他回答

我很惊讶没有人指出一个好的网站:http://detectmobilebrowsers.com/它已经为移动检测准备好了不同语言的代码(包括但不限于):

阿帕奇ASP软件C类#IIS公司JavaScript发动机发动机PHP文件Perl语言蟒蛇轨道

如果您也需要检测平板电脑,只需查看“关于”部分以获取其他RegEx参数。

Android平板电脑、iPad、Kindle Fires和PlayBook未被设计要添加对平板电脑的支持,请将|android | ipad | playbook | silk添加到第一个正则表达式。

你需要控制大小

var  is_mobile = false;
        $(window).resize(function() {

            if ($('#mobileNav').css('display') == 'block') {
                is_mobile = true;
            }

            if (is_mobile == true) {

                console.log('is_mobile')
                document.addEventListener(
                    "DOMContentLoaded", () => {
                        new Mmenu("#mainMenu", {
                            "offCanvas": {
                                "position": "right-front"
                            }
                        });
                    }
                );

            }

        }).resize();

为了增加额外的控制层,我使用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;
}

在一行javascript中:

var isMobile = ('ontouchstart' in document.documentElement && /mobi/i.test(navigator.userAgent));

如果用户代理包含“Mobi”(根据MDN)并且ontouchstart可用,那么它很可能是一个移动设备。

EDIT:根据评论中的反馈更新正则表达式代码。使用regex/mobi/i,i不区分大小写,mobi匹配所有移动浏览器。看见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox

你会做太多的工作。

if (window.screen.availWidth <= 425) {
   // do something
}

您可以通过JS在页面加载时执行此操作。无需编写长字符串列表来尝试捕获所有内容。哇,你错过了一个!然后你必须回去改变它/添加它。更流行的手机尺寸约为425英寸或更小(在纵向模式下),平板电脑约为700英寸,任何更大的都可能是笔记本电脑、台式机或其他更大的设备。如果你需要移动风景模式,也许你应该在Swift或Android工作室工作,而不是传统的网络编码。

附带说明:发布时,这可能不是一个可用的解决方案,但现在可以使用了。