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

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


当前回答

Window.matchMedia()

Window接口的matchMedia()方法返回一个新的MediaQueryList对象,然后可用于确定文档匹配媒体查询字符串,并监视文档,以检测何时匹配(或停止匹配)该媒体查询用法说明您可以使用返回的媒体查询来执行这两项操作即时和事件驱动的检查,以查看文档是否匹配媒体查询。执行一次性、即时检查以查看文档匹配媒体查询,查看匹配属性的值,如果文档满足媒体查询的要求。如果您需要了解文档是否匹配媒体查询,您可以随时查看更改要传递到对象的事件。有一个很好的例子Window.devicePixelRatio上的文章。

let mql = window.matchMedia('(max-width: 767px)');

其他回答

在一行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 (typeof window.orientation !== "undefined" || navigator.userAgent.indexOf('IEMobile') !== -1) {
   //is_mobile
}

有时,为了显示特定于该设备的内容,需要知道客户使用的是哪个品牌的设备,例如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 Maniacshttp://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

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

此外,我建议使用小型JavaScript库Bowser,yes no r。它基于navigator.userAgent,对所有浏览器(包括iPhone、Android等)都进行了测试。

https://github.com/ded/bowser

你可以简单地说:

if (bowser.msie && bowser.version <= 6) {
  alert('Hello China');
} else if (bowser.firefox){
  alert('Hello Foxy');
} else if (bowser.chrome){
  alert('Hello Silicon Valley');
} else if (bowser.safari){
  alert('Hello Apple Fan');
} else if(bowser.iphone || bowser.android){
  alert('Hello mobile');
}