检测移动浏览器

IT技术 javascript browser-detection mobile-browser platform-detection
2021-01-02 15:55:19

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

我知道我可以navigator.userAgent通过使用正则表达式来使用和编写该函数,但是用户代理对于不同的平台来说太多样化了。我怀疑匹配所有可能的设备会很容易,我认为这个问题已经解决了很多次,所以应该有某种完整的解决方案来完成这样的任务。

我正在查看这个站点,但遗憾的是脚本是如此神秘,以至于我不知道如何将它用于我的目的,即创建一个返回 true/false 的函数。

6个回答

使用正则表达式(来自detectmobilebrowsers.com):

这是一个函数,它使用一个非常长且全面的正则表达式,它根据用户是否正在使用移动设备浏览来返回 atruefalse值。

window.mobileCheck = function() {
  let check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

对于那些希望在此测试中包含平板电脑的人(尽管可以说,您不应该),您可以使用以下功能:

window.mobileAndTabletCheck = function() {
  let check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

使用 navigator.userAgentData

您也可以使用navigator.userAgentData.mobile,但userAgentData仍处于试验阶段,因此不建议在生产中使用。

const isMobile = navigator.userAgentData.mobile; //resolves true/false

userAgentData 的兼容性图表


原始答案

您可以通过简单地浏览设备列表并检查是否useragent匹配以下内容来完成此操作:

  function detectMob() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];
    
    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

但是,由于您认为此方法不可靠,您可以假设任何分辨率为800x600或更低的设备也是移动设备,从而进一步缩小您的目标范围(尽管如今许多移动设备的分辨率比这高得多)

IE

  function detectMob() {
    return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
  }

参考:

关于页面:Android 平板电脑、iPad、Kindle Fires 和 PlayBooks 未通过设计检测到。要添加对平板电脑的支持,请添加|android|ipad|playbook|silk到第一个正则表达式。
2021-02-08 15:55:19
您好,我刚刚在我的 iPad 3、iOS 6.1.2 上访问了detectmobilebrowsers.com链接,它显示“未检测到移动浏览器”。
2021-02-18 15:55:19
天哪,用户代理的整个想法很糟糕,真的,真的需要停止。我们真的需要停止让客户与潮流作斗争,并坚持使用媒体查询。如果他们想根据特定页面的比例进行重定向,那么只需通过 JS 检查特定媒体查询的范围,即tylergaw.com/articles/reacting-to-media-queries-in-javascript
2021-02-27 15:55:19
谷歌电视也是安卓系统。什么定义了手机?屏幕尺寸 ?触碰 ?设备方向?当我设计时,更多的是鼠标悬停与否,大按钮或小链接的问题。所以,现在,我用“if (Modernizr.touch)”运行:)
2021-03-03 15:55:19
@RichardLovejoy 在构建网站时,ipad 通常不被视为移动设备。
2021-03-05 15:55:19

怎么样:

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

...因为智能手机通常支持此属性而桌面浏览器不支持。MDN 中查看

编辑 1:正如@Gajus 所指出的,window.orientation现在已弃用,不应使用。

编辑 2:您可以使用实验screen.orientation代替已弃用的window.orientation. MDN 中查看

编辑 3:从 window.orientation 更改为 screen.orientation

这可能不会长期有效。1) 平板电脑可以有合适的屏幕尺寸,您希望它们显示完整的桌面网站,但它们将具有此属性 2) Windows 8 就在这里,并且有一堆带有触摸屏和可旋转屏幕的笔记本电脑。
2021-02-17 15:55:19
喜欢它并且完美运行,谢谢。对于我的解决方案,我只是追求简单。
2021-02-17 15:55:19
这实际上是超级独特和令人敬畏的,您介意我将其添加到我的答案中吗?
2021-02-25 15:55:19
window.orientation是不推荐使用的属性(developer.mozilla.org/en-US/docs/Web/API/Window/orientation , compat.spec.whatwg.org/#dom-window-orientation),某些移动浏览器出于未知原因选择支持该属性. 相同的浏览器实现window.screen.orientation(也在桌面浏览器中定义)。我只能假设window.orientation由于遗留原因而留在那里,因此不应在新应用程序中使用。
2021-02-26 15:55:19
至于您关于具有合适屏幕尺寸的平板电脑的第一点 - 我认为您也可以对所有其他解决方案提出相同的论点(大屏幕平板电脑被跟踪为小屏幕)。无论如何,这里的想法是搜索小型设备共享的属性,而不是保留维护长代码,并为每个新的设备/版本/模型添加正则表达式。我认为设备检测属于过去,今天我们需要专注于特征检测。再次,我很高兴在这里了解更合适的财产...
2021-03-01 15:55:19
var 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

为什么不any()为 ORedisMobile成员创建一个 for...in 循环
2021-02-09 15:55:19
@ChristopherW 我已经按照你的建议创建了它的插件并修改了代码
2021-02-23 15:55:19
也许将 iOS 移动到 BlackBerry() 之前只是为了将更常见的情况放在首位并让早期救助节省一些额外的处理?
2021-03-01 15:55:19
@AkarshSatija 这 5 项正则表达式检查的性能下降是否会影响您的任何应用程序?如果是这样,我会非常惊讶。过早的优化可能会浪费时间......
2021-03-04 15:55:19
@Rob_vH 我已将此代码放入 github ( github.com/smali-kazmi/detect-mobile-browser ) 并带有一些高级功能;您也可以在那里发送建议
2021-03-09 15:55:19

这是来自facebook的弹弓来源的一个简单解决方案

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
  /* your code here */
}
在检测可以安装移动应用程序的设备的情况下很有用。你不关心浏览器本身。只是设备/操作系统。
2021-02-15 15:55:19
好的。在某些情况下非常有用
2021-03-03 15:55:19
适用于 Windows Phone / webOS / Blackberry?
2021-03-03 15:55:19
整洁的!在 2021 年仍然有效,尽管我会添加一个let isMobile= 现在
2021-03-07 15:55:19

来到这里寻找一种简单、干净的方法来检测“触摸屏设备”,我将其归类为移动设备和平板电脑。在当前的答案中没有找到一个干净的选择,但确实解决了以下问题,这也可能对某人有所帮助。

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

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

var touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);
如果桌面的显示器支持触摸怎么办?
2021-02-25 15:55:19
@HappyCoder 我相信操作系统在桌面上的触摸屏处于活动状态时告诉浏览器。所以,是的,这个检查应该仍然有效。
2021-02-25 15:55:19
Bootstrap 日期选择器使用以下内容: if ( window.navigator.msMaxTouchPoints || 'ontouchstart' in document) { this.input.blur(); }
2021-03-03 15:55:19
@JTTaylor 看起来微软正在推荐 navigator.maxTouchPoints(没有ms前缀)。还有一篇MDN 文章可以查看。
2021-03-05 15:55:19
(+1) 但是,我现在使用的桌面有一个触摸屏,对于touchstart|end|etc.
2021-03-09 15:55:19