有没有办法检测用户是否在jQuery中使用移动设备？类似于CSS@media属性？如果浏览器在手持设备上，我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
当前回答
屏幕可能位于分辨率较小的桌面上，也可能位于分辨率较宽的手机上，因此，结合本问题中的两个答案
const isMobile = window.matchMedia("only screen and (max-width: 760px)");
if (/Mobi|Tablet|iPad|iPhone/i.test(navigator.userAgent) || isMobile.matches) {
console.log('is_mobile')
}
其他回答
我为.NET应用程序执行此操作。
在共享的_Layout.cshtml页面中，我添加了这个。
@{
var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;
}
<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">
然后检查站点中的任何页面（jQuery）：
<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>
这里有一个函数，您可以使用它来获得关于您是否在移动浏览器上运行的正确/错误答案。是的，这是浏览器嗅探，但有时这正是您需要的。
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;
}
看看这篇文章，它提供了一个非常好的代码片段，说明当检测到触摸设备时该怎么做，或者如果调用了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();
}
有时，为了显示特定于该设备的内容，需要知道客户使用的是哪个品牌的设备，例如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/
对我来说，小是美丽的，所以我使用这种技巧：
在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中添加任何虚拟元素。
