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

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

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


当前回答

如何:

if (typeof screen.orientation !== 'undefined') { ... }

...因为智能手机通常支持这个属性,而桌面浏览器不支持。在MDN中见。

编辑1:正如@Gajus指出的,窗口。Orientation现在已弃用,不应该使用。

编辑2:您可以使用实验屏幕。Orientation而不是弃用的window.orientation。在MDN中见。

编辑3:从窗口更改。朝向屏幕。朝向

其他回答

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

这取决于用例。所有的移动设备都需要电池。如果你想要的是在不耗尽电池的情况下计算电量,使用电池状态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 */
}

或者将它们结合起来,在平板设备上获得更好的用户体验。

有一个简单的技巧来检测它是否是一个移动设备。检查ontouchstart事件是否存在:

function isMobile()
{
    return "ontouchstart" in window;
}

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

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

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

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

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

(更新):

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

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

IE10+解决方案仅使用matchMedia:

const isMobile = () => window.matchMedia('(max-width: 700px)').matches

isMobile()返回布尔值