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

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


当前回答

在try/catch块中使用多种检测技术的ES6解决方案

该函数包括创建“TouchEvent”、寻求对“ontouchstart”事件的支持,甚至对mediaQueryList对象进行查询。

有目的地,一些失败的查询将抛出一个新的错误,因为当我们处于try/catch块中时,我们可以使用它作为回退来咨询用户代理。

我没有使用测试,在很多情况下,它可能会失败,并指出误报。

它不应用于任何类型的真实验证,但在分析和统计的一般范围内,数据量可以“原谅”精度的不足,它可能仍然有用。

常量isMobile=((dc,wd)=>{//获取浏览器“用户代理”或供应商。。。查看`window中的“opera”属性`let ua=wd.userAgent | | wd.navigator.vendor | | wd.opera;尝试{/***正在创建触摸事件。。。在具有触摸屏或模拟器(但不是移动设备)的现代浏览器中,不会导致错误。*否则,它将创建一个“DOMException”实例*/dc.createEvent(“TouchEvent”);//检查touchStart事件((wd中的“ntouchstart”)||(dc.documentElement中的“ontouchstart”?void(0):新错误('未能检查“ontouchstart”事件');//检查`mediaQueryList`。。。作为现代浏览器通过让mQ=wd.matchMedia&&matchMedia(“(指针:粗略)”);//如果没有,则抛出错误以使用“用户代理”嗅探测试如果(!mQ||mQ.media!==“(指针:粗略)”||!mQ.matches){抛出新错误(“测试失败”“mediaQueryList”“);}//如果没有故障,设备移动的可能性很大(但不能保证)返回true;}捕获(ex){//返回到用户代理嗅探return/(android|bb\d+|meego)+移动|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge|maemo|midp|mmp|mobile+firefox|netfront|operam(ob|in)i|palm(os)|电话|p(ixi|re)\/|pulger|pocket|psp|系列(4|6)0|symbian|treo|up\。(浏览器|链接)|vodafone |wap|windows ce|xda|xiino/i.test(ua)||/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(\-|_)|g1u|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(|\/)|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 | 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|mb)|t2(18|50)|t6(00|10|18)|ta(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(ua.substr(0,4));}})(文档、窗口);//显示结果let container=document.getElementById('result');container.textContent=isMobile?'是,您的设备似乎是移动的':'否,您的手机似乎不是移动的';<p id=“result”></p>


用于测试用户代理的正则表达式有点旧,可以在网站上找到http://mobiledetect.com其不再运行。

也许有更好的模式,但我不知道。


字体:

触摸事件:https://developer.mozilla.org/en-US/docs/Web/API/TouchEventontouchstart:https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontouchstart媒体查询列表:https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList


PS:

因为无论是通过检查特征,还是通过使用正则表达式检查用户代理字符串,都无法100%准确地进行识别。上面的代码片段只应被视为:“此问题的另一个示例”,以及:“不建议在生产中使用”。

其他回答

如果使用引导,可以将此元素添加到页面并检查其可见性:

      <div id="mobile-detect" class="d-sm-none d-md-block" > </div>


function is_mobile() {
   if( $('#mobile-detect').css('display')=='none') {
       return true;
   }
   return false
}

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

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

但是,由于您使用的是jQuery,您可能需要了解jQuery.support集合。它是用于检测当前浏览器功能的财产集合。文档位于此处:http://api.jquery.com/jQuery.support/

因为我不知道你到底想做什么,所以我不知道其中哪一个最有用。

尽管如此,我认为最好的选择是使用服务器端语言(如果可以选择的话)重定向或编写不同的脚本到输出。由于您并不真正了解移动浏览器x的功能,因此在服务器端执行检测和更改逻辑将是最可靠的方法。当然,如果您不能使用服务器端语言,所有这些都是一个悬而未决的问题:)

如果你不特别担心小显示器,你可以使用宽度/高度检测。这样,如果宽度小于一定大小,移动网站就会被抛出。这可能不是完美的方法,但对于多个设备来说,这可能是最容易检测到的。您可能需要为iPhone4(大分辨率)设置一个特定的分辨率。

你会做太多的工作。

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

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

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

在以下位置找到解决方案: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...
}