有没有办法检测用户是否在jQuery中使用移动设备？类似于CSS@media属性？如果浏览器在手持设备上，我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
当前回答
看看这篇文章，它提供了一个非常好的代码片段，说明当检测到触摸设备时该怎么做，或者如果调用了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();
}
其他回答
看看这篇文章，它提供了一个非常好的代码片段，说明当检测到触摸设备时该怎么做，或者如果调用了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();
}
我为.NET应用程序执行此操作。
在共享的_Layout.cshtml页面中，我添加了这个。
@{
var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;
}
<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">
然后检查站点中的任何页面（jQuery）：
<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>
结账http://detectmobilebrowsers.com/它为您提供了多种语言的移动设备检测脚本，包括
JavaScript、jQuery、PHP、JSP、Perl、Python、ASP、C#、ColdFusion等
有时，为了显示特定于该设备的内容，需要知道客户使用的是哪个品牌的设备，例如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.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...
}
