有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
当前回答
所有答案都使用用户代理来检测浏览器,但基于用户代理的设备检测不是很好的解决方案,最好是检测触摸设备等功能(在新的jQuery中,他们删除了$.browser,改用$.support)。
要检测移动设备,您可以检查触摸事件:
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
}
摘自使用JavaScript检测“触摸屏”设备的最佳方法是什么?
其他回答
我知道这个问题有很多答案,但从我所看到的情况来看,没有人能以我的方式解决这个问题。
CSS使用宽度(媒体查询)来确定应用于基于宽度的web文档的样式。为什么不在JavaScript中使用宽度?
例如,在Bootstrap(Mobile First)媒体查询中,存在4个快照/断点:
超小型设备为768像素及以下。小型设备的像素范围从768到991。中等设备的范围从992到1199像素。大型设备为1200像素及以上。
我们也可以使用它来解决JavaScript问题。
首先,我们将创建一个函数,该函数获取窗口大小并返回一个值,该值允许我们查看设备正在查看我们的应用程序的大小:
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"
}
};
现在我们已经设置了函数,我们可以调用它并存储值:
var device = getBrowserWidth();
你的问题是
如果浏览器在手持设备上,我希望运行不同的脚本。
现在我们有了设备信息,剩下的就是if语句:
if(device === "xs"){
// Enter your script for handheld devices here
}
下面是CodePen的示例:http://codepen.io/jacob-king/pen/jWEeWG
你可以做这么简单的事情
(window.screen.width < 700) {
//The device is a Mobile
} else {
//The device is a Desktop
}
navigator.userAgentData.mobile返回[true|false]
你不能依赖navigator.userAgent,并不是每个设备都会显示其真实的操作系统。例如,在我的HTC上,这取决于设置(“使用移动版本”开/关)。在…上http://my.clockodo.com,我们只是使用screen.width来检测小型设备。不幸的是,在某些Android版本中,screen.width存在一个错误。您可以将这种方式与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/它为您提供了多种语言的移动设备检测脚本,包括
JavaScript、jQuery、PHP、JSP、Perl、Python、ASP、C#、ColdFusion等