BOM如何判断设备类型？

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《BOM如何识别用户设备类型？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

检测设备类型没有单一银弹式属性，最基础且常用的是navigator.userAgent，但其不靠谱原因包括历史兼容性伪装、Android生态碎片化、可被用户篡改及缺乏语义化能力。辅助判断设备类型的BOM属性还包括：1.window.innerWidth/innerHeight（视口尺寸）和window.screen.width/height（物理分辨率），用于区分屏幕大小；2.navigator.maxTouchPoints和'ontouchstart' in window，用于检测触摸支持；3.window.matchMedia()结合媒体查询判断布局适配；4.screen.orientation检测屏幕方向变化；5.navigator.connection提供网络状况间接判断移动设备。构建健壮的检测逻辑应采用组合拳策略：优先使用响应式设计与能力检测，其次结合UA作为补充，避免过度细化设备型号，并封装成工具函数提升维护性。

在BOM（Browser Object Model）的世界里，要检测用户的设备类型，我们通常会把目光投向navigator.userAgent这个老伙计，辅以屏幕尺寸相关的属性，以及一些触摸事件的特征。但说实话，这活儿从来就不是一锤子买卖，更像是在玩一场猜谜游戏，需要多方印证，才能得出个八九不离十的结论。

解决方案

要判断设备类型，没有一个银弹式的属性，通常需要一个组合拳。最基础的当然是navigator.userAgent，它是一个包含了浏览器、操作系统、设备信息等一大串字符串。我们可以通过匹配其中的关键词来初步判断，比如是否存在"Android"、"iPhone"、"iPad"、"Mobile"等。

function getDeviceTypeByUserAgent() {
    const ua = navigator.userAgent;
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)) {
        // 进一步细分手机和平板
        if (/iPad/i.test(ua) || (/Android/i.test(ua) && !/Mobile/i.test(ua))) {
            return 'tablet';
        }
        return 'mobile';
    }
    return 'desktop';
}
// console.log(getDeviceTypeByUserAgent());

但光看userAgent远远不够，这东西太容易伪装和误判了。更可靠的辅助手段是结合屏幕尺寸。window.innerWidth和window.innerHeight提供了浏览器视口（viewport）的实时尺寸，而window.screen.width和window.screen.height则反映了设备的物理屏幕分辨率。结合这些尺寸，可以更精确地判断是手机的小屏幕、平板的中等屏幕，还是桌面端的大屏幕。

function getDeviceTypeByScreenSize() {
    const width = window.innerWidth;
    // 经验值，可以根据实际项目需求调整
    if (width <= 768) { // 假设小于等于768px是手机
        return 'mobile';
    } else if (width > 768 && width <= 1024) { // 假设768px到1024px是平板
        return 'tablet';
    }
    return 'desktop';
}
// console.log(getDeviceTypeByScreenSize());

此外，触摸事件的支持也是一个强有力的信号。如果设备支持触摸，那它大概率是手机或平板。我们可以通过检查window.ontouchstart是否存在，或者navigator.maxTouchPoints是否大于0来判断。

function getDeviceTypeByTouchSupport() {
    if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
        return 'touch-device';
    }
    return 'non-touch-device';
}
// console.log(getDeviceTypeByTouchSupport());

最终，一个比较健壮的方案会把这些方法组合起来，形成一个综合判断的逻辑。比如，优先判断触摸能力，然后结合屏幕尺寸，最后再用userAgent做一些特定设备的补充识别。

为什么说navigator.userAgent的检测方式“不太靠谱”？

这其实是个老生常谈的问题了，navigator.userAgent就像一个爱说谎的“老实人”。我个人在项目里没少被它坑过。它的不靠谱主要体现在几个方面：

首先是历史遗留和兼容性。很多浏览器和设备为了能在早期网站上正常显示，会故意在userAgent里伪装成其他流行的浏览器或操作系统。比如，很多Android平板的UA里会包含“Mobile”字样，导致你把它误判为手机。更别提iPad的UA里长期以来都含有“Mac OS X”和“Safari”的字样，让人傻傻分不清。

其次是碎片化和更新滞后。特别是Android生态，设备型号和系统版本简直是天文数字，每个厂商可能都有自己的UA字符串格式。新设备、新系统发布后，UA字符串会随之变化，你的检测规则可能很快就过时了，需要不断维护更新。这就像你刚学会了一套武功，结果对手又换了新的招式，你永远在追赶。

再者是可伪装性。用户或者开发者可以通过浏览器插件、开发者工具甚至修改系统配置来轻易地改变userAgent字符串。这意味着，即使你写了一个看似完美的UA检测逻辑，也可能被用户绕过。这让基于UA的检测变得非常脆弱，一旦用户有心，就能轻易地“骗”过你的判断。

最后，它不够语义化。你检测出来的是一串字符串，而不是一个明确的设备能力。比如，你可能想知道设备是否支持触摸，或者屏幕大小是否适合某个布局，而UA并不能直接告诉你这些。它更像是一个设备的“身份证号”，而不是一份“能力清单”。所以，很多时候我们并不是真的想知道“是不是iPhone”，而是想知道“它能不能点”、“它屏幕够不够大”。

除了User-Agent，还有哪些BOM属性可以辅助判断设备类型？

除了前面提到的window.innerWidth/innerHeight和window.screen.width/height，还有几个BOM属性和API能提供非常有用的辅助信息：

1. navigator.maxTouchPoints 和 ontouchstart： 这俩是判断设备是否支持触摸的最直接方式。navigator.maxTouchPoints返回设备支持的最大同时触摸点数，如果大于0，那它就是个触屏设备。而'ontouchstart' in window则是检查window对象上是否存在ontouchstart事件属性，这在老版本浏览器中也很常用。我个人觉得，对于判断“移动设备体验”而言，触屏能力比UA字符串有用多了。

2. window.matchMedia()： 这严格来说不是一个BOM属性，而是Web API，但它与BOM紧密结合，用于检测CSS媒体查询的状态。你可以用它来判断当前视口是否符合某个媒体查询条件，比如window.matchMedia('(max-width: 768px)')。这比手动比较window.innerWidth要优雅得多，也更符合响应式设计的理念。你不是在判断“是不是手机”，而是在判断“当前屏幕是不是小尺寸”。

3. window.orientation 或 screen.orientation： 这主要用于判断设备的方向（横屏或竖屏）。虽然window.orientation已经不推荐使用，但screen.orientation提供了更现代的API。手机和平板通常都支持屏幕方向的动态切换，而桌面设备则不具备这个特性。这可以作为判断移动设备的另一个间接线索。不过，它的主要作用还是在处理屏幕旋转事件上。

4. navigator.connection (Network Information API)： 虽然这跟设备类型不是直接关联，但它能提供当前网络连接的信息，比如effectiveType（2G, 3G, 4G, slow-2G等）。如果一个设备当前连接的是蜂窝网络，那它大概率是移动设备。这在某些需要根据网络状况优化体验的场景下非常有用，比如加载不同质量的图片或视频。

在实际项目中，如何构建一个相对健壮的设备类型检测逻辑？

构建一个健壮的设备检测逻辑，核心思想就是“组合拳”和“能力检测优先于UA嗅探”。我通常会这样考虑：

1. 响应式设计是基石： 很多时候，你压根不需要知道用户具体是哪种设备，你只需要知道当前屏幕大小适合哪种布局。所以，优先使用CSS媒体查询和JavaScript结合window.matchMedia()来做布局适配。这比任何设备类型检测都来得直接和有效。如果你的目标是提供不同的UI布局，那么基于视口尺寸的响应式设计是首选。

2. 能力检测优先： 如果确实需要区分设备类型来提供不同的功能或体验（比如，触摸手势和鼠标点击事件的处理逻辑不同），那么优先检测设备的能力。

• 触摸能力： ('ontouchstart' in window || navigator.maxTouchPoints > 0)。这是判断是否为触屏设备最靠谱的方式。如果一个设备支持触摸，那它很可能就是手机或平板。
• 视口尺寸： window.innerWidth结合预设的断点。这是判断大屏小屏的直观方式。

3. User-Agent作为补充和细化： 只有当以上能力检测无法满足需求时，才考虑使用navigator.userAgent。比如，你需要针对某个特定品牌的平板做一些特殊的兼容性处理，或者区分iOS和Android设备（即使它们都是触屏小屏设备）。这时，UA解析库（比如ua-parser-js这类成熟的库）会比自己写正则匹配更可靠，但也要注意库的更新维护。

4. 避免过度区分： 别试图去区分每一个细微的设备型号，那是个无底洞。大部分业务场景下，区分“桌面/平板/手机”或者“触屏/非触屏”就足够了。过度细化只会增加代码的复杂度和维护成本。

5. 封装成服务或工具函数： 把你的检测逻辑封装成一个可复用的函数或模块。这样可以提高代码的可维护性，避免在代码库中散落着各种零碎的检测片段。

// 一个综合判断的示例（仅为示意，实际项目会更复杂）
function getComprehensiveDeviceType() {
    const ua = navigator.userAgent;
    const isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0);
    const screenWidth = window.innerWidth;

    // 优先判断触摸能力和屏幕尺寸
    if (isTouchDevice) {
        if (screenWidth <= 768) {
            return 'mobile'; // 触屏小屏，大概率手机
        } else if (screenWidth > 768 && screenWidth <= 1024) {
            return 'tablet'; // 触屏中屏，大概率平板
        } else {
            // 触屏大屏，可能是 Surface 这类二合一设备，或者大型触摸显示器
            // 此时可以结合UA进一步判断
            if (/iPad/i.test(ua)) return 'tablet'; // iPad Pro 这种大屏平板
            return 'desktop-touch'; // 比如一体机或带触摸屏的笔记本
        }
    } else {
        // 非触屏设备，基本就是桌面端
        return 'desktop';
    }
}
// console.log(getComprehensiveDeviceType());

最终，我们的目标是为用户提供最佳的体验，而不是纠结于一个精确的设备型号标签。基于能力和尺寸的判断，往往比基于User-Agent的嗅探来得更实用、更稳定。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《BOM如何判断设备类型？》文章吧，也可关注golang学习网公众号了解相关技术文章。