我正在寻找一个函数，返回一个布尔值，如果用户正在使用移动浏览器与否。
我知道我可以使用导航器。userAgent并使用regex编写该函数，但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易，我认为这个问题已经解决了很多次，所以应该有某种完整的解决方案来完成这样的任务。
我正在看这个网站，但不幸的是，脚本是如此神秘，我不知道如何使用它为我的目的，这是创建一个返回true/false的函数。
当前回答
这是一个比匹配更有效的userAgent解决方案…
function _isMobile(){
// if we want a more complete list use this: http://detectmobilebrowsers.com/
// str.test() is more efficent than str.match()
// remember str.test is case sensitive
var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
(navigator.userAgent.toLowerCase());
return isMobile;
}
其他回答
这是一个比匹配更有效的userAgent解决方案…
function _isMobile(){
// if we want a more complete list use this: http://detectmobilebrowsers.com/
// str.test() is more efficent than str.match()
// remember str.test is case sensitive
var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
(navigator.userAgent.toLowerCase());
return isMobile;
}
这取决于用例。所有的移动设备都需要电池。如果你想要的是在不耗尽电池的情况下计算电量，使用电池状态API:
navigator.getBattery().then(battery => {
battery.charging ? 'charging' : 'not charging';
});
如果您正在寻找的是表示的使用matchMedia，它返回一个布尔值:
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}
或者将它们结合起来，在平板设备上获得更好的用户体验。
如何:
if (typeof screen.orientation !== 'undefined') { ... }
.．.因为智能手机通常支持这个属性，而桌面浏览器不支持。在MDN中见。
编辑1:正如@Gajus指出的，窗口。Orientation现在已弃用，不应该使用。
编辑2:您可以使用实验屏幕。Orientation而不是弃用的window.orientation。在MDN中见。
编辑3:从窗口更改。朝向屏幕。朝向
我搜索了Replit的代码(因为它在网站上到处都是错误)，直到我看到:
(function (isTouchDevice) {
if (!isTouchDevice) return;
var isTouchClass = 'is-touch-device';
var docElement = document.documentElement;
docElement.className = docElement.className ? [docElement.className, isTouchClass].join(' ') : isTouchClass;
})(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
所以我把它修改成这样:
function isTouchDevice() {
if (!(("ontouchstart" in window) || (window.DocumentTouch && document instanceof DocumentTouch))) {
return false
}
return true
}
来自不同用户代理的值:
Mozilla/5.0 (Windows NT 10.0;Win64;x64) AppleWebKit/537.36 (KHTML，像壁虎)Chrome/103.0.0.0 Safari/537.36: false Mozilla / 5.0 (Linux;Android 10;小米A2) AppleWebKit/537.36 (KHTML，像壁虎)Chrome/105.0.0.0移动Safari/537.36: true
检测手机或平板设备的一个好方法是查看浏览器是否可以创建触摸事件。
简单JavaScript代码:
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
if (isMobile()) {
# do whatever you wanna do!
}
这对我来说效果很好，但是包含触摸屏的笔记本电脑设备可能会有一个问题。
我不确定触屏笔记本电脑是否会被视为移动设备，因为我还没有测试过。
