在jQuery中检测移动设备的最佳方法是什么？
有没有一个可靠的方法来检测用户是否在jQuery中使用移动设备？ 类似于CSS @media属性的东西？ 如果浏览器位于手持设备上，我想运行其他脚本。
jQuery $.browser函数不是我正在寻找的。
而不是使用jQuery，你可以使用简单的JavaScript来检测它：
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { // some code.. }
或者你可以将它们结合起来，使它更容易通过jQuery访问…
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
现在$.browser将返回所有以上设备的"device"
注意：在jQuery v1.9.1上删除$.browser 。 但是你可以使用jQuery迁移插件代码
更彻底的版本：
var isMobile = false; //initiate as false // device detection if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /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(\-|_)|g1 u|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( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|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\-a|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|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(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(navigator.userAgent.substr(0,4))) isMobile = true;
对我来说小的是美丽的，所以我使用这种技术：
在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，因为它加载了所有这些configuration文件图像和东西。 这对移动用户来说并不好 所以，除了隐藏容器元素，我也在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。 而不是使用上述解决scheme，只需使用以下内容：
$( document ).ready(function() { var isMobile = window.matchMedia("only screen and (max-width: 760px)"); if (isMobile.matches) { //Conditional script here } });
浏览器支持： http ： //caniuse.com/#feat=matchmedia
这种方法的优点是不仅更简单，更短，而且可以根据需要有条件地定位不同的设备，如智能手机和平板电脑，而不必在DOM中添加任何虚拟元素。
根据Mozilla的说法- 使用用户代理的浏览器检测 ：
总之，我们build议在用户代理的任何位置查找string“Mobi”以检测移动设备。
喜欢这个：
if (/Mobi/.test(navigator.userAgent)) { // mobile! }
这将匹配所有常见的移动浏览器用户代理，包括移动Mozilla，Safari，IE，Opera，Chrome等。
你想要检测移动设备正在做的是越来越接近“浏览器嗅探”的概念国际海事组织。 做一些特征检测可能会好得多。 像http://www.modernizr.com/这样的图书馆可以提供帮助。;
例如，移动和非移动之间的界限在哪里？ 它每天变得越来越模糊。
这不是jQuery，但我发现这个： http : //detectmobilebrowser.com/
它提供脚本来检测多种语言的移动浏览器，其中之一是JavaScript。 这可能会帮助你与你在找什么。
但是，由于您使用的是jQuery，因此您可能需要了解jQuery.support集合。 这是检测当前浏览器function的属性集合。 文档在这里： http : //api.jquery.com/jQuery.support/
既然我不知道你要完成什么，我不知道哪一个是最有用的。
所有这一切，我认为你最好的select是redirect或使用服务器端语言（如果这是一个选项）写一个不同的脚本输出。 由于您不了解移动浏览器x的function，因此在服务器端执行检测和更改逻辑将是最可靠的方法。 当然，如果你不能使用服务器端语言，那么所有这些都是一个有争议的问题:)
简单而有效的一行：
function isMobile() { return ('ontouchstart' in document.documentElement); }
但是上面的代码没有考虑到带有触摸屏的笔记本电脑的情况。 因此，我提供了这个基于@Julian解决scheme的第二个版本：
function isMobile() { try{ document.createEvent("TouchEvent"); return true; } catch(e){ return false; } }
有时需要知道客户正在使用哪个品牌的设备，以显示特定于该设备的内容，如链接到iPhone商店或Android市场。 Modernizer是伟大的，但只显示您的浏览器function，如HTML5或Flash。
这里是我在jQuery中的UserAgent解决scheme，为每个设备types显示不同的类：
/*** 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(); } }
这个解决scheme来自Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/
find一个解决scheme： 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()); } };
然后validation其是否为Mobile，可以使用以下方式进行testing：
if(isMobile.any()) { //some code... }
如果通过“移动”你的意思是“小屏幕”，我使用这个：
var windowWidth = window.screen.width < window.outerWidth ? window.screen.width : window.outerWidth; var mobile = windowWidth < 500;
在iPhone上，你会得到一个320的window.screen.width。在Android上，你将会得到一个480的window.outerWidth（尽pipe这可以取决于Android）。 iPad和Android平板电脑将会返回像768这样的数字，这样他们就可以得到您想要的完整视图。
如果您使用Modernizr ，那么使用前面提到的Modernizr.touch非常容易。
不过，我更喜欢使用Modernizr.touch和用户代理testing的组合，只是为了安全起见。
var deviceAgent = navigator.userAgent.toLowerCase(); var isTouchDevice = Modernizr.touch || (deviceAgent.match(/(iphone|ipod|ipad)/) || deviceAgent.match(/(android)/) || deviceAgent.match(/(iemobile)/) || deviceAgent.match(/iphone/i) || deviceAgent.match(/ipad/i) || deviceAgent.match(/ipod/i) || deviceAgent.match(/blackberry/i) || deviceAgent.match(/bada/i)); if (isTouchDevice) { //Do something touchy } else { //Can't touch this }
如果你不使用Modernizr，你可以简单地用('ontouchstart' in document.documentElement)replace上面的Modernizr.touch函数，
另请注意，testing用户代理iemobile将为您提供比Windows Phone更广泛的检测到的Microsoft移动设备。
也看到这个问题
如果你不特别担心小显示器，你可以使用宽度/高度检测。 这样，如果宽度低于一定的大小，移动网站就会被抛出。 这可能不是完美的方式，但它可能是最容易检测多个设备。 您可能需要为iPhone 4（大分辨率）特定的一个。
你不能依靠navigator.userAgent，并不是每个设备都能展示它的真实操作系统。 在我的HTC例如，这取决于设置（“使用手机版”开/关）。 在http://my.clockodo.com上; ，我们只是使用screen.width来检测小设备。 不幸的是，在一些android版本中，screen.width有一个bug。 您可以将这种方式与userAgent结合使用：
if(screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { alert("This is a mobile device"); }
我很惊讶，没有人指出一个不错的网站： http : //detectmobilebrowsers.com/它已经准备好用不同语言的代码进行移动检测。 如果你还需要检测平板电脑，只需检查关于部分额外的正则expression式参数。
在javascript的一行中：
var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
如果用户代理包含“Mobi”（按照MDN），并且ontouchstart可用，则很可能是移动设备。
我知道这个问题有很多答案，但从我看到没有人接近答案的方式，我会解决这个问题。
CSS使用宽度（Media Queries）来确定基于宽度应用于Web文档的哪些样式。 为什么不在JavaScript中使用宽度？
例如，在Bootstrap（移动优先）媒体查询中，存在4个捕捉/断点：
- 额外的小设备是768像素及以下。
- 小型设备的范围从768到991像素。
- 中等设备的范围从992到1199像素。
- 大型设备是1200像素以上。
我们也可以使用它来解决我们的JavaScript问题。
首先，我们将创build一个获取窗口大小的函数，并返回一个值，使我们可以看到设备正在查看我们的应用程序的大小。
var getBrowserWidth = function(){ if(window.innerWidth < 768){ // Extra Small Device return "xs"; } else if(window.innerWidth < 991){ // Small Device return "sm" } else if(window.innerWidth < 1199){ // Medium Device return "md" } else { // Large Device return "lg" } };
现在我们已经build立了函数，我们可以调用它来存储值：
var device = getBrowserWidth();
你的问题是
如果浏览器位于手持设备上，我想运行其他脚本。
现在我们有了设备信息，剩下的就是if语句：
if(device === "xs"){ // Enter your script for handheld devices here }
这里是CodePen的一个例子： http ://codepen.io/jacob-king/pen/jWEeWG
这里有一个函数，可以用来获得关于你是否在移动浏览器上运行的真/假答案。 是的，这是浏览器嗅探，但有时这正是你所需要的。
function is_mobile() { var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry']; for(i in agents) { if(navigator.userAgent.match('/'+agents[i]+'/i')) { return true; } } return false; }
看看这个post ，它提供了一个非常好的代码片段，当检测到触摸设备时要做什么或者如果调用touchstart事件该怎么做：
$(function(){ if(window.Touch) { touch_detect.auto_detected(); } else { document.ontouchstart = touch_detect.surface; } }); // End loaded jQuery var touch_detect = { auto_detected: function(event){ /* add everything you want to do onLoad here (eg. activating hover controls) */ alert('this was auto detected'); activateTouchArea(); }, surface: function(event){ /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */ alert('this was detected by touching'); activateTouchArea(); } }; // touch_detect function activateTouchArea(){ /* make sure our screen doesn't scroll when we move the "touchable area" */ var element = document.getElementById('element_id'); element.addEventListener("touchstart", touchStart, false); } function touchStart(event) { /* modularize preventing the default behavior so we can use it again */ event.preventDefault(); }
我build议你看看http://wurfl.io/
简而言之，如果您导入一个微小的JS文件：
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
您将留下一个JSON对象，如下所示：
{ "complete_device_name":"Google Nexus 7", "is_mobile":true, "form_factor":"Tablet" }
（当然假设你使用的是Nexus 7），你将可以执行如下操作：
if(WURFL.is_mobile) { //dostuff(); }
这是你在找什么。
免责声明：我为提供这项免费服务的公司工作。 谢谢。
很好的回答谢谢。 支持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"; }
用这个：
/** * jQuery.browser.mobile (http://detectmobilebrowser.com/) * jQuery.browser.mobile will be true if the browser is a mobile device **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/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(\-|_)|g1 u|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( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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\-a|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|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
然后使用这个：
if(jQuery.browser.mobile) { console.log('You are using a mobile device!'); } else { console.log('You are not using a mobile device!'); }
基于http://detectmobilebrowser.com/的简单function
function isMobile() { var a = navigator.userAgent||navigator.vendor||window.opera; return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/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(\-|_)|g1 u|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( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|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\-a|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|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(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(a.substr(0,4)); }
所有的答案使用用户代理来检测浏览器，但基于用户代理的设备检测不是很好的解决scheme，更好的是检测function，如触摸设备（在新的jQuery他们删除$.browser并使用$.support 。
要检测手机，您可以检查触摸事件：
function is_touch_device() { return 'ontouchstart' in window // works on most browsers || 'onmsgesturechange' in window; // works on ie10 }
采取从什么是使用JavaScript检测“触摸屏”设备的最佳方式？
如何mobiledetect.net ？
其他解决scheme似乎太基本。 这是一个轻量级的PHP类。 It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment. You can also benefit from Mobile Detect by using any of the 3rd party plugins available for: WordPress, Drupal, Joomla, Magento, etc.
I would be suggesting to use following combo of strings, to check if device type being used.
As per Mozilla documentation string Mobi is recommended. But, some of the old tablets doesn't return true if only Mobi is used, hence we should use Tablet string too.
Similarly, for being on the safe side iPad and iPhone strings could also be used to check the device type.
Most of the new devices would return true for Mobi string alone.
if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) { // do something }
You could also use server side script and set javascript variables from it.
Example in php
download http://code.google.com/p/php-mobile-detect/ and then set javascript variables.
<script> //set defaults var device_type = 'desktop'; </script> <?php require_once( 'Mobile_Detect.php'); $detect = new Mobile_Detect(); ?> <script> device_type="<?php echo ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop'); ?>"; alert( device_type); </script>
You can also detect it like bellow
$.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")); };
To add an extra layer of control I use the HTML5 storage to detect if it is using mobile storage or desktop storage. If the browser does not support storage I have an array of mobile browser names and I compare the user agent with the browsers in the array.
It is pretty simple. Here is the function:
// 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']; for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true; // nothing found.. assume desktop return false; }
User agent strings should not be trusted alone. Solution below will work in all situations.
function isMobile(a) { return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /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(\-|_)|g1 u|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( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|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\-a|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|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(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(a.substr(0, 4))); }
and call this function:
isMobile(navigator.userAgent || navigator.vendor || window.opera)
Knowing that TouchEvent is only for mobile devices, Maybe the simplest way could be check if user device can support it:
function isMobile() { try { document.createEvent("TouchEvent"); return true; } catch(e) { return false; } }
This is my code i'm using in my projects:
function isMobile() { try { if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) { return true; }; return false; } catch(e){ console.log("Error in isMobile"); return false; } }
