如何通过index.html识别访客是使用手机还是电脑访问？

本文共计929个文字，预计阅读时间需要4分钟。

直接读取 `navigator.userAgent` 字符串，检查是否包含常见移动端关键词。这是兼容性最好、零依赖的方案，适用于所有现代浏览器（包括微信内置浏览器）。

注意：不能只看 "Mobile"，因为部分 iPad UA 不含该字段；也不能只看 "iPad"，因为 iOS 13+ 的桌面模式会主动隐藏它。

• /Mobi|Android|iPhone|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) —— 覆盖绝大多数手机
• 若需区分 iPad，加 || /iPad/i.test(navigator.userAgent) && !/Macintosh.*Safari/i.test(navigator.userAgent)（避免误判 macOS Safari）
• 别用 indexOf("Android") !== -1 这类写法，大小写不安全，正则更稳

用 matchMedia 判断视口宽度更可靠

UA 可被伪造或修改，而 window.matchMedia 基于真实设备能力，适合做响应式降级逻辑（比如在 PC 端强制加载桌面版地图组件）。

关键点：它不等于“屏幕物理尺寸”，而是当前 viewport 的有效宽度（受缩放、横竖屏影响）。