用ChatGPT解决这个技术问题 Extra ChatGPT

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

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

我正在查看 this site，但遗憾的是，该脚本非常神秘，以至于我不知道如何将它用于我的目的，即创建一个返回 true/false 的函数。

相关：stackoverflow.com/questions/3514784/…。
试试看这个。 stackoverflow.com/questions/743129/…
@Thrustmaster：真的不会。为不同的浏览器提供不同的 JS 意味着您必须在响应中添加 Vary: User-Agent，否则缓存代理将存储一个版本并将其发送到另一种浏览器。但 Vary: User-Agent 使响应在 IE 中无法缓存。
@ave：您想通过检测“移动”浏览器来做什么？在当今平板电脑和混合计算设备的世界中，这种区别非常有争议。您是否希望检测小屏幕，并在这种情况下呈现不同的 UI？您是否希望检测低带宽连接？您是否正在寻找检测触摸界面？
所以我更新了我的答案以使用 detectmobilebrowsers.com javascript 方法，但如果有人仍然需要它，则返回一个布尔值。 （ 以防万一 ）。快乐检测:)

M
Michael Zaporozhets

使用正则表达式（来自 detectmobilebrowsers.com）：

这是一个使用极其冗长而全面的正则表达式的函数，它根据用户是否使用手机浏览来返回 true 或 false 值。 

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

Compatibility chart for 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 ) );
  }

参考：

使用 javascript 检测浏览器和设备

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

怎么样： 

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 就在这里，还有一堆带有触摸屏和旋转屏幕的笔记本电脑。
至于您关于屏幕尺寸合适的平板电脑的第一点-我认为您也可以对所有其他解决方案提出相同的论点（大屏幕平板电脑被跟踪为小屏幕）。无论如何，这里的想法是搜索小型设备共享的属性，而不是保持长代码并为每个新的设备/版本/模型添加正则表达式。我认为设备检测属于过去，今天我们需要专注于特征检测。再次，我很高兴在这里找到更合适的房产...
window.orientation 是不推荐使用的属性（developer.mozilla.org/en-US/docs/Web/API/Window/orientation、compat.spec.whatwg.org/#dom-window-orientation），某些移动浏览器出于未知原因选择支持该属性。相同的浏览器实现 window.screen.orientation（在桌面浏览器中也有定义）。我只能假设 window.orientation 出于遗留原因而留在那里，因此不应在新应用程序中使用。
桌面 developer.mozilla.org/en-US/docs/Web/API/Screen/… 也支持 screen.orientation
M
Mudaser Ali 
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() 成为 ORed isMobile 成员的 for...in 循环？
@ChristopherW 我按照您的建议创建了它的插件并修改了代码
@Rob_vH 我已将此代码放入 github (github.com/smali-kazmi/detect-mobile-browser) 中，并具有一些高级功能；你也愿意在那里发送建议
这个得到了我对内容的支持，但我正试图弄清楚如何将其转换为 John Papa 的样式并且遇到了一些困难。 AngularJS 作为一个整体（大约一个月了解它）和 vm.js 仍然很新。符号使学习曲线向上倾斜一点。有什么帮助吗？ -C§ 编辑：我正在尝试用 karma-jasmine 对其进行单元测试，这就是我问的原因。
@AkarshSatija 这 5 次正则表达式检查的性能下降是否会影响您的任何应用程序？如果确实如此，我会感到非常惊讶。过早的优化可能会浪费时间......
M
Madan Sapkota

这是来自 facebook's slingshot 的简单解决方案 

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
  /* your code here */
}
好的。在某些情况下非常有用
对于检测可以安装移动应用程序的设备的情况很有用。您本身并不关心浏览器。只是设备/操作系统。
整洁的！ 2021 年仍然有效，但我现在要添加 let isMobile=
适用于 Windows Phone / webOS / 黑莓？
安卓电视怎么样。
T
Tigger

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

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

编辑：要同时支持带有触摸屏的桌面和手机，您可以使用以下内容： 

var touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);
如果桌面显示器支持触控呢？
@HappyCoder 我相信操作系统可以在桌面上的触摸屏处于活动状态时告诉浏览器。所以，是的，这个检查应该仍然有效。
(+1) 但是，我现在使用的桌面有一个触摸屏，并且对于 touchstart|end|etc 并不总是一致的。
引导日期选择器使用以下内容： if ( window.navigator.msMaxTouchPoints || 'ontouchstart' in document) { this.input.blur(); }
@JTTaylor 看起来微软是 recommending navigator.maxTouchPoints （没有 ms 前缀）。还有一个 MDN article 需要检查。
C
Chunky Chunk

根据 MDN's article on Browser detection using the user agent 的说法，建议尽可能避免这种方法，并建议其他途径，例如特征检测。

但是，如果必须使用用户代理来检测设备是否是移动的，他们建议：

总之，我们建议在用户代理中的任意位置查找字符串“Mobi”来检测移动设备。

因此，这个单行就足够了：

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

[更新]：

正如@zenw0lf 在评论中建议的那样，使用正则表达式会更好：

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

.includes IE-11 不支持
@PashaOleynik 一个 polyfill 可以解决这个问题
装有 Android 的 Nexus 7 平板电脑的用户代理字符串中没有 Mobile
@AlexSorokoletov 也适用于 MDN 文章 If the device is large enough that it's not marked with “Mobi”, you should serve your desktop site (which, as a best practice, should support touch input anyway, as more desktop machines are appearing with touchscreens).
我认为这在没有 polyfill 的任何地方都可以使用：const isMobile = /Mobi/.test(window.navigator.userAgent)
v
vsync

正如许多人所说，依赖用户代理数据的移动目标是有问题的。计算屏幕尺寸也是如此。

我的方法是借用 CSS 技术来确定界面是否是触摸的：

仅使用 javascript（所有现代浏览器都支持），media query 匹配可以轻松推断设备是否为移动。 

function isMobile() {
    var match = window.matchMedia || window.msMatchMedia;
    if(match) {
        var mq = match("(pointer:coarse)");
        return mq.matches;
    }
    return false;
}
带有触摸屏的笔记本电脑怎么样？
我会检查 !matchMedia("(any-pointer:fine)").matches 自己。 （“没有插入鼠标”，而不是“有触摸屏”。
这很有效，而我的上一个脚本会被使用浏览器缩放功能的人欺骗（例如，我在 13 英寸 4K 屏幕上与之交谈的人下降到 1080p 并且仍然必须使用缩放）。在我的 iPhone 上工作（Safari/ Firefox）和 Android 设备（Waterfox/Chrome/“浏览器”）。绝对比所有投票率更高的答案更可靠。
在我补充了 navigator.userAgent.toLowerCase().indexOf('fennec') > -1 的 Android 上没有检测到 FireFox fennec（也许不是最好的补充......）
此外，您可以测试悬停属性：对于智能手机和触摸屏@media（悬停：无）和（指针：粗略）
C
Community

检测 JS 代码是否在移动浏览器上执行没有完美的解决方案，但以下两个选项在大多数情况下应该可以工作。

选项 1：浏览器嗅探

!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b )/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b) (?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j =/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/ (CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp(" (?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter "),"未定义"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q (b,r)&&q(d,r),设备:q(b,r)||q(c,r)||q(d,r)},this.amazon={手机:q(g,r) ),平板电脑:!q(g,r)&&q(h,r),设备:q(g,r)||q(h,r)},this.android={手机:q(g,r)| |q(e,r),平板电脑:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),设备:q(g,r )||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),table t:q(j,r),设备:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),歌剧:q(m,r),firefox:q(o,r),chrome:q(n,r),设备:q(k,r)||q(l,r)||q(m,r )||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this. windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet| |this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a}; "undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function "==typeof 定义&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this); alert(isMobile.any ? 'Mobile' : 'Not mobile');

这个特定的浏览器嗅探代码是 a library called isMobile 的代码。

选项 2：window.orientation

测试是否定义了 window.orientation：

var isMobile = window.orientation > -1; alert(isMobile ? 'Mobile' : 'Not mobile');

笔记

并非所有触摸屏设备都是移动设备，反之亦然。所以，如果你想实现一些专门针对触摸屏的东西，你不应该测试你的浏览器是否在移动设备上运行，而是测试设备是否支持触摸屏：

var hasTouchscreen = 'ontouchstart' 在窗口中； alert(hasTouchscreen ? '有触摸屏' : '没有触摸屏');

定向方法真的很好！ ))
我喜欢您的 window.orientation 解决方案，但文档说它已被弃用！ developer.mozilla.org/en-US/docs/Web/API/Window/orientation
方向方法不是很好，因为 Windows 8 和更高版本可以改变方向。
Windows 8 和更新版本专注于添加对移动设备以及混合设备（可以转换为大垫子的笔记本电脑）的支持，这就是为什么即使 moz 没有将其称为已弃用的检测方法，定向也会失败。
它来自安装了图形软件的 Win 7 可以更改方向但问自己一个问题，谁可以在台式机/笔记本电脑上使用另一个屏幕方向，如纵向而不是横向，并使用 i 超过 1 分钟。没有人 ！！！在桌面上更改方向意味着您将开始从下到上阅读屏幕上的字符。
J
JeffJak

这是一个比匹配更有效的 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;
}
测试方法不区分大小写，但您的正则表达式是。您可以在末尾使用“i”标记不区分大小写的正则表达式并执行 /iphone|etc/i.test(navigator.userAgent)
z
zadubz

功能检测比试图找出您使用的设备要好得多，而且很难跟上一直出现的新设备，像 Modernizr 这样的库可以让您知道特定功能是否可用。

你已经回答了另一个问题，而不是被问到的问题。而不是“我如何检测移动设备？”，您回答的是“我如何检测某些功能？”。并非所有设备检测都用于特征检测。如果我们希望获得有关设备的统计信息怎么办？那么不，“特征检测”并不“比[找出设备]好得多”。
这不是答案，但它值得不仅仅是评论。问题是：您为什么要检测浏览器，然后您可能想知道它，因为仅（缺少）触摸。在大多数情况下，响应式网页设计就足够了。
如果我要检测的功能是设备 CPU 的强大程度怎么办？我需要降低手机的质量...
R
Rasmus Søborg

为了添加额外的控制层，我使用 HTML5 存储来检测它是使用移动存储还是桌面存储。如果浏览器不支持存储，我有一个移动浏览器名称数组，我将用户代理与数组中的浏览器进行比较。

这很简单。这是功能： 

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    var mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile']; 
    for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;

    // nothing found.. assume desktop
    return false;
}
我尚未在移动设备上进行过测试，但 Safari、Chrome 或 Firefox（发布时所有最新版本）中都不存在 sessionStorage.desktop。但是，您会获得赞成票，因为您的解决方案比其他解决方案朝着更好的方向发展。但不要忘记使用 var mobile = 而不是 mobile =。
在不支持该方法的旧浏览器中不要使用 indexOf 或使用 polyfill 也是一个好主意。没有必要在小写值列表上使用 toLowerCase，如果您正在运行 /ipad|iphone|etc/i.test(navigator.userAgent) 而不是上面的慢循环，也没有必要这样做。
s
stujo

这样的事情怎么样？ 

if(
    (screen.width <= 640) || 
    (window.matchMedia && 
     window.matchMedia('only screen and (max-width: 640px)').matches
    )
  ){
   // Do the mobile thing
}
为什么不直接使用 screen.width 呢？在我看来，这比 window.matchMedia 更可靠。
好点约翰，我不记得我当时在想什么，如果第一个子句是假的，第二个子句似乎不太可能（现在看）返回真。我添加它一定有某种原因。
大多数体面的程序员在看到一年前自己编写的代码时都会感到羞愧。那些不仅没有成长为程序员的人;-)
窗口分辨率与浏览器是否在移动设备上无关。例如，许多桌面浏览器在非全屏窗口中运行。如果你向这些浏览器展示一个专为手持屏幕设计的 UI，他们的用户将会有一个令人沮丧的体验。
N
Neo Morina

检测移动设备或平板设备的一个非常好的方法是查看浏览器是否可以创建触摸事件。

纯 JavaScript 代码： 

function isMobile() {
   try{ document.createEvent("TouchEvent"); return true; }
   catch(e){ return false; }
}

if (isMobile()) {
   # do whatever you wanna do!
}

这对我来说非常有效，但包括触摸屏显示器的笔记本电脑设备可能存在问题。

我不确定触摸屏笔记本电脑是否会被检测为移动设备，因为我尚未对其进行测试。

触摸屏笔记本电脑将被检测为移动设备。以及用于台式机的触摸屏显示器。信不信由你，如果您使用触摸屏设备将 RDP 连接到另一个没有触摸屏的设备，您也会遇到问题。
@blissfool 我想这将不是检测移动设备的正确方法。
抱歉不行。但是，对于非常有限的用例，它可能仍然是一个可行的选择。
永远不要编写基于异常的代码，在任何情况下都会被抛出......
@Sivic 只有在 TouchEvent 不存在并且上面的代码捕获它并返回 false 时才会抛出它。在移动设备、平板电脑或其他触摸屏设备上并非如此。
R
Rick Enciso

不要使用此方法，因为 window.orientation 现在已弃用！！！ 

function isMobile() {
  return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
window.orientation 是 deprecated。不再推荐此功能。尽管某些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅本页底部的兼容性表以指导您的决定。请注意，此功能可能随时停止工作。
g
gdibble

特征检测 

const isMobile = localStorage.mobile || window.navigator.maxTouchPoints > 1;

自 2022-02-07 起在 Chrome + SAFARI 中工作 :: 结合特征检测并尝试此线程和其他站点中的所有内容。 localStorage.mobile 适用于 Chrome 移动版；后者适用于 Safari 移动版。不会在打开或不打开开发工具和/或在移动模拟器上触发桌面浏览器。在撰写本文时，它会触发真正的移动浏览器，但不会触发桌面。

请考虑

我还在 Win10 上的 Lenovo X1 Yoga（键盘或平板模式）上对此进行了测试

localStorage.mobile 无论如何都未定义 当笔记本电脑处于键盘模式时：window.navigator.maxTouchPoints 为 1 → isMobile 为 false 当键盘向后翻转且笔记本电脑处于平板电脑模式时：window.navigator.maxTouchPoints 为 10 → isMobile 是真的

maxTouchPoints - 如果笔记本电脑有触摸屏怎么办？
@sskular 这是一个非常好的问题---谢谢。我为我们测试了它，因为我有一个可用于 Win10 的联想 X1 Yoga。 1) localStorage.mobile 无论如何都是 undefined。 2）当笔记本电脑处于键盘模式时，window.navigator.maxTouchPoints为1； isMobile 也是 false。 3) 当键盘回弹且笔记本电脑处于平板模式时，window.navigator.maxTouchPoints为10； isMobile 也是 true。现在是主观问题：我们是否将平板电脑模式的平板电脑或笔记本电脑视为移动设备？ 🤔
伟大的工作，也适用于 Firefox for Android。
C
Cody Gray

一旦元素获得焦点，您会立即对其进行模糊处理。 Bootstrap-datepicker 是一个非常流行且维护良好的组件，在 GitHub 中拥有近 10,000 颗星，它使用这种方法： 

if (window.navigator.maxTouchPoints || 'ontouchstart' in document) {
    this.input.blur();
}

https://github.com/uxsolutions/bootstrap-datepicker

感谢Tigger的帮助。

L
Lanti

这是我重新考虑的问题解决方案。仍然不完美。唯一真正的解决方案是设备制造商开始认真对待“Mobile”和“Tablet”用户代理字符串。 

window.onload = userAgentDetect;
function userAgentDetect() {
  if(window.navigator.userAgent.match(/Mobile/i)
  || window.navigator.userAgent.match(/iPhone/i)
  || window.navigator.userAgent.match(/iPod/i)
  || window.navigator.userAgent.match(/IEMobile/i)
  || window.navigator.userAgent.match(/Windows Phone/i)
  || window.navigator.userAgent.match(/Android/i)
  || window.navigator.userAgent.match(/BlackBerry/i)
  || window.navigator.userAgent.match(/webOS/i)) {
    document.body.className += ' mobile';
    alert('True - Mobile - ' + navigator.userAgent);
  } else {
    alert('False - Mobile - ' + navigator.userAgent);
  }
  if(window.navigator.userAgent.match(/Tablet/i)
  || window.navigator.userAgent.match(/iPad/i)
  || window.navigator.userAgent.match(/Nexus 7/i)
  || window.navigator.userAgent.match(/Nexus 10/i)
  || window.navigator.userAgent.match(/KFAPWI/i)) {
    document.body.className -= ' mobile';
    document.body.className += ' tablet';
    alert('True - Tablet - ' + navigator.userAgent);
  } else {
    alert('False - Tablet - ' + navigator.userAgent);
  }
}

当 Nexus 7 平板电脑只有 Android UA 字符串时会发生什么？首先，Mobile 变为 true，之后 Tablet 也变为 true，但 Tablet 会从 body 标签中删除 Mobile UA 字符串。

CSS： 

body.tablet { background-color: green; }
body.mobile { background-color: red; }

为开发添加了 alert 行。 Chrome 控制台可以模拟许多手持设备。在那里测试。

编辑：

只是不要使用它，而是使用特征检测。有这么多的设备和品牌，以品牌为目标永远不会是正确的解决方案。

“别用这个” ?您可以随时删除您的答案。此外，所有那些 .match( ...嗯。 RegExp 和 .test() 是一个更简单的变体。
v
vhs

取决于用例。所有移动设备都需要电池。如果您追求的是不耗尽电池的计算能力，请使用 Battery Status 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 */
}

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

请注意，电池状态 API 正在从浏览器中删除。
检查电池，这很聪明
L
Luca Passani

我建议您查看http://wurfl.io/

简而言之，如果你导入一个很小的 JS 文件： 

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

您将得到一个 JSON 对象，如下所示： 

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

（当然，这是假设您使用的是 Nexus 7）并且您将能够执行以下操作： 

if(WURFL.form_factor == "Tablet"){
    //dostuff();
}

这就是你要找的。

免责声明：我为提供这项免费服务的公司工作。谢谢。

为什么这不能识别 iphone 上的 safari？
您能否扩展您正在使用的浏览器（确切的 UA 字符串将是完美的），您正在获取什么数据以及您期望什么？
我也试过 wurfl，我在运行 IOS 11.2 的 iPhone 5C 上。它没有将 Safari 识别为移动浏览器。我期待使用 "is_mobile" : true 然后 "form_factor": Smartphone 并且它也没有返回。
我不得不求助于公司的移动数据专家，他们告诉我 OS 11.2 不能在 5C 上运行。最低的设备是5S。所以你写的东西有问题。请随时与 ScientiaMobile 离线联系，以验证可能断开连接的位置。谢谢
A
Andi

这只是我在项目中使用的 accepted answer 的一个 es6 端口。请注意，这也包括平板电脑。 

export const isMobile = () => {
  const vendor = navigator.userAgent || navigator.vendor || window.opera;

  return !!(
    /(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(
      vendor
    ) ||
    /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(
      vendor.substr(0, 4)
    )
  );
};
M
M Katz

这是 Michael Zaporozhets 答案的模糊版本。它还使用检查仅在第一次调用时构建正则表达式。有关用于从正则表达式数组构建字符串的技术，请参见 this answer。 

var gRE = null;
var gRE4 = null;

function PlatformIsMobile()
{
    var e;
    
    if ( gRE == null )
    {
        e =
            [
                /(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/
            ];
        
        gRE = new RegExp(
            e.map( function( r ) { return r.source } ).join( "|" ), "i"
        );
    }
    
    if ( gRE4 == null )
    {
        e =
            [
                /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\-/
            ];
        
        gRE4 = new RegExp(
            e.map( function( r ) { return r.source } ).join( "|" ), "i"
        );
    }
    
    var key = navigator.userAgent || navigator.vendor || window.opera;
    
    return gRE.test( key ) ||
           gRE4.test( key.substr( 0, 4 ) );
}
i
insign

仅使用 matchMedia 的 IE10+ 解决方案： 

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

isMobile() 返回一个布尔值

这个was already answered here。为什么你认为你的答案比 2018 年的现有答案增加了任何额外的背景？ window.matchMedia('mediaString').matches 返回一个布尔值已经很清楚了。
@RokoC.Buljan 好吧，对您来说似乎很明显的事情可能并不适合所有人。所以我决定做出自己的答案。
m
molokoloco

最好的必须是： 

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 是......好的

> Android 上的 Firefox 移动版似乎没有“窗口中的‘方向’”
抱歉.. 对我来说没问题，现在它工作得很好。 “如果 (Modernizr.touch) /* ... */” 继续...
只是想知道 Modernizr.touch 在触摸屏桌面设备上如何工作。
为了让它更优雅，你应该在一个 if-else if-else if 块中编写所有代码。
F
Fred Wuerges

这是他的全部功能 

function isMobile(){
    return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|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|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/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((navigator.userAgent||navigator.vendor||window.opera).substr(0,4)))
}

jQuery.noConflict();
jQuery(document).ready(function(){
    if(isMobile()) alert("Mobile"); else alert("Not Mobile");
});
.substr(0,4) 返回前 4 个字母。它如何检测“android.+mobile”？
@raacer 答案中实际上有两个正则表达式（都在同一行）-第一个检查整个 UA 字符串，并查找 android、mobile 等，而第二个仅检查 UA 的前 4 个字符.
有效！非常感谢。
A
Ahmad Yousef

使用“window.screen.width”怎么样？ 

if (window.screen.width < 800) {
// do something
}

或者 

if($(window).width() < 800) {
//do something
}

我想这是最好的方式，因为每天都有新的移动设备！

（虽然我认为旧浏览器不支持它，但试一试:)）

什么是景观？
这对于某些场景不是很有用。如果桌面浏览器被调整大小，它可能被错误地检测为移动浏览器
PC在可用性上与移动设备本质上不同，可怕的答案！
0
0x1ad2

这是一个 ECMAScript 6 解决方案（TypeScript 就绪） 

public isMobile(): boolean {
  let check = false;
  ((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);
  return check;
 }
为什么不只返回 if 条件而不是整个 check 变量？
C
Community

请注意，大多数较新的移动设备现在的分辨率都大于 600x400。即，iPhone 6....

测试证明：在这里运行最受好评和最新的帖子，运行一次可选检查，如下所示： 

(function(a){
    window.isMobile = (/(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)))
})(navigator.userAgent||navigator.vendor||window.opera);

alert("This browser was found to be a % browser.", window.isMobile ? 'mobile' : 'desktop');

不知何故，以下浏览器应用程序返回了以下结果。规格：iPhone 6S，iOS 10.3.1。

Safari（最新）：将其检测为移动设备。

Chrome（最新）：未将其检测为移动设备。

所以，然后我测试了来自 Lanti (https://stackoverflow.com/a/31864119/7183483) 的建议，它确实返回了正确的结果（所有 iOS 设备的移动设备和我的 Mac 的桌面设备）。因此，我继续对其进行了一些编辑，因为它会触发两次（对于移动设备和平板电脑）。然后我注意到在 iPad 上进行测试时，它也以移动设备的形式返回，这是有道理的，因为 Lanti 使用的参数检查操作系统比什么都重要。因此，我只是将平板电脑的 IF 语句移到了移动检查中，如果平板检查为负，则返回移动，否则返回平板。然后我为移动检查添加了 else 子句以返回为台式机/笔记本电脑，因为两者都符合条件，但随后注意到浏览器检测到 CPU 和操作系统品牌。所以我添加了那里返回的内容作为 else if 语句的一部分。为了限制它，我添加了一个警告 else 声明，以防没有检测到。见下文，将很快在 Windows 10 PC 上进行测试更新。

哦，我还添加了一个“debugMode”变量，以便在调试和正常编译之间轻松切换。

免责声明：完全归功于 Lanti，而且这还没有在 Windows 平板电脑上进行测试...可能会返回台式机/笔记本电脑，因为操作系统是纯 Windows。一旦我找到一个使用它的朋友就会检查。 

function userAgentDetect() {
    let debugMode = true;
    if(window.navigator.userAgent.match(/Mobile/i)
        || window.navigator.userAgent.match(/iPhone/i)
        || window.navigator.userAgent.match(/iPod/i)
        || window.navigator.userAgent.match(/IEMobile/i)
        || window.navigator.userAgent.match(/Windows Phone/i)
        || window.navigator.userAgent.match(/Android/i)
        || window.navigator.userAgent.match(/BlackBerry/i)
        || window.navigator.userAgent.match(/webOS/i)) {
        if (window.navigator.userAgent.match(/Tablet/i)
            || window.navigator.userAgent.match(/iPad/i)
            || window.navigator.userAgent.match(/Nexus 7/i)
            || window.navigator.userAgent.match(/Nexus 10/i)
            || window.navigator.userAgent.match(/KFAPWI/i)) {
            window.deviceTypeVar = 'tablet';
            if (debugMode === true) {
                alert('Device is a tablet - ' + navigator.userAgent);
            }
        } else {
            if (debugMode === true) {
                alert('Device is a smartphone - ' + navigator.userAgent);
            };
            window.deviceTypeVar = 'smartphone';
        }
    } else if (window.navigator.userAgent.match(/Intel Mac/i)) {
        if (debugMode === true) {
            alert('Device is a desktop or laptop- ' + navigator.userAgent);
        }
        window.deviceTypeVar = 'desktop_or_laptop';
    } else if (window.navigator.userAgent.match(/Nexus 7/i)
        || window.navigator.userAgent.match(/Nexus 10/i)
        || window.navigator.userAgent.match(/KFAPWI/i)) {
        window.deviceTypeVar = 'tablet';
        if (debugMode === true) {
            alert('Device is a tablet - ' + navigator.userAgent);
        }
    } else {
        if (debugMode === true) {
            alert('Device is unknown- ' + navigator.userAgent);
        }
        window.deviceTypeVar = 'Unknown';
    }
}
T
Thyagarajan C

我遇到了一些情况，上面的答案对我有用。所以我想出了这个。可能对某人有帮助。 

if(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent)
 || screen.availWidth < 480){
//code for mobile
}

这取决于您的用例。如果您专注于屏幕，请使用 screen.availWidth，如果您想基于文档进行渲染，您可以使用 document.body.clientWidth。

B
Born2Discover

这就是我使用的。我知道 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>
M
Michael Aaron Wilson

啊，是的，古老的问题......

这真的取决于你想对知识做出什么反应。

1. 你想改变 UI 让它很好地适应不同的屏幕尺寸吗？

使用媒体查询。

2. 你想显示/隐藏东西或改变基于鼠标和触摸的功能吗？

This answer above will do 但是，在某些情况下，用户可能同时拥有这两者并切换。在这种情况下，您可以在检测到鼠标或触摸事件时切换一些 JS 变量和/或向文档正文添加一个类 

  window.addEventListener("mousemove", function () {
    isTouch = false;
    document.body.classList.add("canHover");
  });
  window.addEventListener("touchstart", function () {
    isTouch = true;
    document.body.classList.remove("canHover");
  });

body.canHover #aButtonOrSomething:hover {
  //css attributes
}

  document
    .getElementById("aButtonOrSomething")
    .addEventListener("mouseover", showTooltip);
  document
    .getElementById("aButtonOrSomething")
    .addEventListener("click", function () {
      if (isTouch) showTooltip();
    });

3. 你想做一些具体的事情，知道他们有什么设备吗？

Use the accepted answer.

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.