js获取浏览器信息
浏览器这玩意儿，浏览看似是器信个黑盒，其实它把家底都摊在 window.navigator 和 window.screen 这两个对象里了。浏览你打开控制台，器信敲一行 console.log(navigator)，浏览立刻就能看到一长串属性——userAgent、器信platform、浏览language、器信hardwareConcurrency，浏览密密麻麻，器信像一份没整理过的浏览体检报告。
最常用的器信当然是 navigator.userAgent。这串字符串又长又臭，浏览里面藏着浏览器名字、器信版本号、浏览渲染引擎、操作系统，甚至还有设备型号。以前我天真地以为直接正则匹配就能搞定一切，后来被现实狠狠教育了——Edge 的 UA 里藏着 "Chrome" 和 "Safari"，因为它是 Chromium 内核；安卓手机的 UA 里也常带 "Safari"，因为 WebKit 的遗产还在。所以判断浏览器要按顺序来：先查是不是 Edge（有没有 "Edg/"），再看是不是 Firefox（有没有 "Firefox/"），最后才轮到 Chrome（有没有 "Chrome/"）。顺序错了，结果就全乱了。
但 UA 这东西，说实话，已经越来越靠不住了。很多浏览器允许用户伪装，隐私插件也能随便改。我见过一个用户，UA 被改成了 "Netscape 4.0"，差点让我怀疑自己穿越回了1998年。所以如果你只是想知道浏览器类型，用 navigator.brave（如果有）、window.opera 这种特征检测更靠谱。可惜这些特性不是标准，得自己一个个试。
获取屏幕信息就简单多了。 screen.width 和 screen.height 给你物理分辨率，window.innerWidth 和 window.innerHeight 给你视口大小。两者差多少，就是浏览器 UI 占掉的面积——滚动条、工具栏、标签栏，全算在里面。有一次我调试一个响应式布局，发现移动端视口宽度总是比预期大，查了半天才发现是用户把系统字体调大了，浏览器默认缩放比例变成了 1.2。这时候你得看 window.devicePixelRatio，它告诉你一个 CSS 像素对应几个物理像素。iPhone 的 DPR 是 3，普通笔记本是 1，4K 屏缩放到 200% 时也是 2。这个值直接影响 canvas 绘制的清晰度，画图前不查它，画出来就是糊的。
还有一个容易被忽略的：navigator.connection。它告诉你网络类型——effectiveType 可能是 "4g"、"3g" 甚至 "slow-2g"，downlink 给出估算带宽（Mbps）。这个信息特别适合做自适应加载。我做过一个视频站，用这个属性判断网速，慢的话直接切 480p，快就上 1080p，用户几乎感觉不到缓冲。但注意，这是实验性 API，Safari 至今不支持，得做好 fallback。
最后说个冷门的——navigator.getBattery()。这是个返回 Promise 的 API，能拿到电量百分比和是否在充电。听起来很酷，但实际用途有限。我只见过一个场景用到了它：某个移动端 H5 页面，在低电量模式下自动降低动画帧率和亮度，省电。不过这个 API 在非 HTTPS 环境下用不了，而且 Chrome 已经计划移除它——毕竟没人愿意让网页随便读自己的电量。
浏览器信息这东西，看着简单，用起来全是坑。UA 会撒谎，DPR 会变，API 会废弃。我的建议是：能不用就不用，非用不可就做多重判断，且永远给不支持的情况留后路。毕竟你的用户可能正用着一个你听都没听过的国产浏览器，它的 UA 看起来像 Chrome，内核是 WebKit，但行为习惯跟谁都不一样。