我正在寻找一个函数,返回一个布尔值,如果用户正在使用移动浏览器与否。

我知道我可以使用导航器。userAgent并使用regex编写该函数,但是用户代理对于不同的平台来说太复杂了。我怀疑匹配所有可能的设备是否容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。

我正在看这个网站,但不幸的是,脚本是如此神秘,我不知道如何使用它为我的目的,这是创建一个返回true/false的函数。


当前回答

我通常发现,检查只在移动视图中可见的特定元素(比如汉堡图标)的可见性这一更简单的方法效果很好,而且比依赖非常复杂的正则表达式安全得多。这将很难测试100%的工作。

function isHidden(el) {
   return (el.offsetParent === null);
}

其他回答

这就是我用的。我知道userAgent嗅探是不受欢迎的,但我的需求恰好是排除的之一!

<script>
var brow = navigator.userAgent;
    if (/mobi/i.test(brow)) {
        alert('Mobile Browser');
        // Do something for mobile
    } else {
        alert('Not on Mobile');
        // Do something for non mobile
    }
</script>

我来这里是为了寻找一种简单、干净的方法来检测“触屏设备”,我把它们归类为手机和平板电脑。在目前的答案中没有找到一个干净的选择,但确实计算出以下可能也会帮助到一些人。

var touchDevice = ('ontouchstart' in document.documentElement);

编辑:要同时支持带有触摸屏的台式机和手机,您可以使用以下方法:

var touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);

最好的一定是:

var isMobile = (/Mobile/i.test(navigator.userAgent));

但是就像Yoav Barnea说的…

// Seem legit
var isMobile = ('DeviceOrientationEvent' in window || 'orientation' in window);
// But with my Chrome on windows, DeviceOrientationEvent == fct()
if (/Windows NT|Macintosh|Mac OS X|Linux/i.test(navigator.userAgent)) isMobile = false;
// My android have "linux" too
if (/Mobile/i.test(navigator.userAgent)) isMobile = true;

在这3个测试之后,我希望var isMobile是…好吧

我认为这才是真正的保护方案。

测试在Chrome和Firefox,移动和桌面。

var ___isMobileDevice;
const isMobileDeviceCheck = () => {
    const mobileOsRegExp = "(Android|webOS|iPhone|iPod)";
    if(screen.width < 500 || navigator.userAgent.match('/'+mobileOsRegExp+'/i')) {
        ___isMobileDevice = true;
    }
    if (___isMobileDevice) {
        if (typeof window.orientation === "undefined") {
            ___isMobileDevice = false; 
        }
    }
    if (typeof navigator.userAgentData != "undefined" && !navigator.userAgentData.mobile) {
        ___isMobileDevice = false; 
    }
    if ( typeof window.orientation !== "undefined" && ___isMobileDevice ) {
        if (window.navigator.maxTouchPoints > 1 && (navigator.userAgentData.mobile || localStorage.mobile || 'ontouchstart' in document)) {
            // mobile device found
            console.log('Is mobile device!'); 
        }
    }
}
window.onresize = () => {
    isMobileDeviceCheck();
}
isMobileDeviceCheck();

PS:作为浏览器扩展的Useragent切换器不能用这段代码欺骗你。

根据MDN关于使用用户代理进行浏览器检测的文章,建议尽可能避免这种方法,并建议使用其他方法,如特征检测。

然而,如果必须使用用户代理作为检测设备是否移动的手段,他们建议:

总而言之,我们建议在中的任何地方查找字符串“Mobi” 用户代理检测移动设备。

因此,这一行代码就足够了:

const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");

(更新):

正如@ zenwolf在评论中建议的那样,使用正则表达式会更好:

const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)