我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。
我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。
当前回答
像这样的怎么样?
if(
(screen.width <= 640) ||
(window.matchMedia &&
window.matchMedia('only screen and (max-width: 640px)').matches
)
){
// Do the mobile thing
}
其他回答
如何:
if (typeof screen.orientation !== 'undefined') { ... }
...因为智能手机通常支持这个属性,而桌面浏览器不支持。在MDN中见。
编辑1:正如@Gajus指出的,窗口。Orientation现在已弃用,不应该使用。
编辑2:您可以使用实验屏幕。Orientation而不是弃用的window.orientation。在MDN中见。
编辑3:从窗口更改。朝向屏幕。朝向
我通常发现,检查只在移动视图中可见的特定元素(比如汉堡图标)的可见性这一更简单的方法效果很好,而且比依赖非常复杂的正则表达式安全得多。这将很难测试100%的工作。
function isHidden(el) {
return (el.offsetParent === null);
}
const isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
如何使用
if( isMobile.any() ) alert('Mobile');
要查看用户是否在特定的移动设备上:
if( isMobile.iOS() ) alert('iOS');
裁判:http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript
github上的增强版:https://github.com/smali-kazmi/detect-mobile-browser
像这样的怎么样?
if(
(screen.width <= 640) ||
(window.matchMedia &&
window.matchMedia('only screen and (max-width: 640px)').matches
)
){
// Do the mobile thing
}
特征检测
const isMobile = localStorage.mobile || window.navigator.maxTouchPoints > 1;
截至2022-02-07,工作在CHROME + SAFARI::结合功能检测并尝试本线程和其他网站中的所有内容。localStorage。移动工作在Chrome移动;后者适用于Safari移动版。在打开或不打开dev-tools时和/或在移动模拟器上不会触发桌面浏览器。在撰写本文时,它会触发一个真正的移动浏览器,而不是桌面。
请考虑
我还在Win10上的联想X1 Yoga(键盘模式或平板模式)上进行了测试
localStorage。无论如何,移动是没有定义的 当笔记本电脑处于键盘模式时:window.navigator。maxTouchPoints is 1→isMobile为false 当键盘向后翻转,笔记本电脑处于平板电脑模式时:window.navigator。maxTouchPoints是10→isMobile是true