先聊点儿背景，咱们怎么会关心设备类型？

说实话，Zuo前端的时候总会碰到“这玩意儿是手机还是电脑”。 哈哈，这事儿不说也不行，毕竟不同设备排版差别大。 我跟你讲，我曾经把一个弹窗写成只在PC上弹，结果移动端直接崩了害！ 所以啊，先把用户到底用啥玩意儿上网，这一步必须踩稳。

一、老办法——User-Agent字符串

Zui传统的办法就是kankan浏览器给服务器送的那个User-Agent。 它像个身份证，里面写着系统、浏览器、甚至机型。 不过呢，UA有点儿“爱装”，有时候会被改造，你懂的。 下面这段代码算是Zui基础的检测：

function getUAInfo {
    const ua = navigator.userAgent.toLowerCase;
    const info = {};
    // 判断是否移动端
    info.isMobile = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test;
    // 判断具体系统
    if ) {
        info.os = 'iOS';
        info.device = /ipad/.test ? 'iPad' : 'iPhone';
    } else if ) {
        info.os = 'Android';
        // 把版本号挑出来
        const m = ua.match/);
        info.version = m ? m : '未知';
    } else if ) {
        info.os = 'Windows Phone';
    } else if ) {
        info.os = 'macOS';
    } else if ) {
        info.os = 'Windows';
    } else {
        info.os = '其他';
    }
    return info;
}

这个函数返回一个对象，你Ke以直接拿来决定加载哪个CSS。

二、平台属性——navigator.platform

其实还有个geng直接的属性叫navigator.platform。 它告诉你底层操作系统的大概类型。

const platform = navigator.platform;
let os = '未知';
if  === 0) os = 'Windows';
else if  === 0) os = 'macOS';
else if  === 0) os = 'Linux';
console.log;

不过这玩意儿在移动端往往返回“Linux”，所以只Neng配合UA一起用。

三、屏幕尺寸 + 触摸事件——双保险

别光靠UA，有时候要kan实际表现。 屏幕宽度小于768像素基本算手机，大于等于1024算桌面。 再加个“ontouchstart”检测，就Neng甩掉大多数。

function detectByScreen {
    const w = window.innerWidth;
    const isTouch =  || navigator.maxTouchPoints> 0;
    let type = 'desktop';
    if  type = isTouch ? 'mobile' : 'desktop'; // 有触摸才算移动端
    else if  type = isTouch ? 'tablet' : 'desktop';
    return type;
}

四、现代API——geng精准但要HTTPS

现在浏览器提供了NavigatorDevice API，Ke以直接拿到硬件信息。 不过得在HTTPS下才Neng用，而且兼容性还不是hen完美。

async function getDeviceCapabilities {
    const deviceInfo = {};
    if  {
        try {
            const caps = await navigator.device.getCapabilities;
            deviceInfo.brand   = caps.brand;
            deviceInfo.model   = caps.model;
            deviceInfo.vendor  = caps.vendor;
        } catch{
            console.log;
        }
    }
    deviceInfo.retina   = window.devicePixelRatio>= 2;
    if  {
        const bat = await navigator.getBattery;
        deviceInfo.batteryLevel   = bat.level;
        deviceInfo.batteryCharging= bat.charging;
    }
    return deviceInfo;
}

五、库和框架——省事省力

Ru果你在用Vue或React，市面上有不少现成的库，比如mobile-detect.js、detect.js之类的。 只要npm装一下用法基本是一行代码搞定：

// npm i mobile-detect
import MobileDetect from "mobile-detect";
const md   = new MobileDetect;
console.log);      // 返回'mobile'或null
console.log);          // 返回操作系统名称
console.log);       // 返回手机型号

说到SEO，设备检测还Neng干啥？

先说正经事儿：搜索引擎爬虫大多是PC端，没有触摸事件，也没有高分辨率屏幕。 Ru果你的网站只给移动端渲染内容，爬虫可Neng根本抓不到关键信息，这就会导致页面被“漏掉”。

为什么百度不收录某些页面？

说实话，这事儿常见。我帮朋友调试过他的网站首页用了大量JS动态注入内容，而没有提供SSR或预渲染。 百度蜘蛛访问时只kan到一个空白的

，于是就直接放弃了。 还有一种情况是：他把所有资源dou放在了CDN上，但是CDN对百度IPZuo了限流，这样爬虫根本进不去资源，自然就“不收录”。 解决办法嘛，就是Zuo好以下两点：

提供静态HTML快照或使用SSR，让爬虫Neng直接kan到完整结构。

检查robots.txt和服务器日志，确保百度爬虫没有被误拦截。

实战技巧：结合多种方法取长补短

老实说单靠一种手段是不靠谱的。咱们Ke以先用UA判断大体，再用屏幕尺寸细分，然后Ru果环境支持，就走现代API获取硬件细节。这样即使有人UA，也难逃检测。

完整示例——一键输出设备信息对象

function fullDetect {
    const uaInfo   = getUAInfo;
    const screen   = detectByScreen;
    const platformInfo={os:navigator.platform};
    return {
        os          : uaInfo.os || platformInfo.os,
        device      : uaInfo.device || screen,
        isMobile    : uaInfo.isMobile,
        layoutType  : screen,
        userAgent   : navigator.userAgent,
        // 若浏览器支持，可异步补充geng多信息
     };
}
// 使用方式
const devInfo=fullDetect;
console.log;

小叮嘱——别忘记用户体验！

咱们Zuo技术归根结底是为人服务，所以识别设备后一定要根据结果优化页面：

移动端尽量轻量化，图片懒加载。

PC端Ke以展示geng丰富的交互和细节。

好啦，这篇随口聊的文章差不多该结束了。 Ru果你还有啥疑问或者想聊聊geng高级的话题，随时来找我哈！ 记得把代码贴进去跑跑kan，不要光kan理论哦~ 哈哈，说实话，我Yi经迫不及待想kan到你的实现效果了！ 祝编码顺利~ 🌟

---