有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
有没有办法检测用户是否在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();
}
其他回答
对我来说,小是美丽的,所以我使用这种技巧:
在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媒体查询根据屏幕大小显示/隐藏元素。
例如,在我的移动版本中,我不想激活Facebook Like Box,因为它会加载所有的个人资料图片和内容。这对移动访客来说并不好。因此,除了隐藏容器元素之外,我还在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用于检测媒体。不使用上述解决方案,只需使用以下方法:
$(function() {
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
//Conditional script here
}
});
浏览器支持:http://caniuse.com/#feat=matchmedia
这种方法的优点是,它不仅简单、更短,而且如果需要,您可以有条件地分别针对不同的设备,如智能手机和平板电脑,而无需在DOM中添加任何虚拟元素。
这不是jQuery,但我发现了这个:http://detectmobilebrowser.com/
它提供了检测多种语言的移动浏览器的脚本,其中一种是JavaScript。这可能会帮助你找到你想要的东西。
但是,由于您使用的是jQuery,您可能需要了解jQuery.support集合。它是用于检测当前浏览器功能的财产集合。文档位于此处:http://api.jquery.com/jQuery.support/
因为我不知道你到底想做什么,所以我不知道其中哪一个最有用。
尽管如此,我认为最好的选择是使用服务器端语言(如果可以选择的话)重定向或编写不同的脚本到输出。由于您并不真正了解移动浏览器x的功能,因此在服务器端执行检测和更改逻辑将是最可靠的方法。当然,如果您不能使用服务器端语言,所有这些都是一个悬而未决的问题:)
你也可以像下面这样检测它
$.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"));
};
如果通过移动设备您了解可触摸设备,则可以通过检查触摸处理器的存在来确定:
let deviceType = (('ontouchstart' in window)
|| (navigator.maxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0)
) ? 'touchable' : 'desktop';
它不需要jQuery。
我建议你结账http://wurfl.io/
简而言之,如果您导入一个很小的JavaScript文件:
<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();
}
这就是你要找的。
免责声明:我为提供这项免费服务的公司工作。