有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
有没有办法检测用户是否在jQuery中使用移动设备?类似于CSS@media属性?如果浏览器在手持设备上,我希望运行不同的脚本。
jQuery$.browser函数不是我想要的。
当前回答
这是我在项目中使用的代码:
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; }
}
其他回答
根据Mozilla浏览器使用用户代理的检测:
总之,我们建议在User Agent中的任何位置查找字符串“Mobi”以检测移动设备。
这样地:
if (/Mobi/.test(navigator.userAgent)) {
// mobile!
}
这将匹配所有常见的移动浏览器用户代理,包括移动Mozilla、Safari、IE、Opera、Chrome等。
Android更新
EricL还建议将Android作为用户代理进行测试,因为平板电脑的Chrome用户代理字符串不包含“Mobi”(但手机版本包含):
if (/Mobi|Android/i.test(navigator.userAgent)) {
// mobile!
}
在一行javascript中:
var isMobile = ('ontouchstart' in document.documentElement && /mobi/i.test(navigator.userAgent));
如果用户代理包含“Mobi”(根据MDN)并且ontouchstart可用,那么它很可能是一个移动设备。
EDIT:根据评论中的反馈更新正则表达式代码。使用regex/mobi/i,i不区分大小写,mobi匹配所有移动浏览器。看见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox
如果发现仅检查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...
}
如果使用引导,可以将此元素添加到页面并检查其可见性:
<div id="mobile-detect" class="d-sm-none d-md-block" > </div>
function is_mobile() {
if( $('#mobile-detect').css('display')=='none') {
return true;
}
return false
}
使用了前面提到的sequeelo解决方案,并添加了宽度/高度检查功能(以避免屏幕旋转错误)。为了选择移动视口的最小/最大边界,我使用了这个资源https://www.mydevice.io/#compare-设备
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
function deviceType() {
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),screenType;
if (isMobile()){
if ((width <= 650 && height <= 900) || (width <= 900 && height <= 650))
screenType = "Mobile Phone";
else
screenType = "Tablet";
}
else
screenType = "Desktop";
return screenType;
}