JavaScript 如何获取浏览器信息

打开网页时，你可能会注意到不同浏览器展示的内容略有差异——比如在手机端和电脑端看同一张图片，大小、位置往往不一样。要让网页适配不同设备，或者根据浏览器类型调整功能，首先得“知道”用户用的是什么浏览器、设备是什么状态。这时候，JavaScript就能帮你快速拿到这些关键信息，就像给网页装了个“身份扫描仪”。

最常用的全局对象：navigator

要获取浏览器信息，绝大多数情况要靠一个叫navigator的对象。你可以把它理解成浏览器自带的“信息小仓库”，里面存着浏览器的品牌、版本、当前语言、设备类型等几十种实用信息，直接用window.navigator就能调用（平时写代码时window.可以省略）。

举个生活化的例子：你去便利店买水，店员先问你“要常温还是冰的”，对应到网页就是“获取用户的语言偏好”。用JavaScript实现的话，只需要一行代码：

`javascript

const userLang = navigator.language;

console.log(userLang); // 输出类似"zh-CN"（简体中文）、"en-US"（美式英语）的结果

`

如果网页是做外贸的，就可以根据这个值自动切换成对应语言的界面，不用让用户手动选择，体验会好很多。

关键信息怎么拿：几个常用属性

navigator里的属性不用全记，常用的只有几个，足够覆盖大多数开发需求：

**浏览器品牌与版本**

想知道用户用的是Chrome、Firefox还是Edge？可以用navigator.userAgent，这个属性会返回一串包含浏览器信息的字符串，比如Chrome的userAgent会包含Chrome/118.0.0.0，Firefox会带Firefox/119.0。不过这个字符串很长，有时还会有混淆信息（比如有些浏览器会伪装成Chrome），所以如果只是判断设备类型，用下面的更简单。

**设备类型判断**

要区分用户是用手机还是电脑，不用分析长长的userAgent，可以用navigator.platform：手机端会输出"iPhone"、"Android"，电脑端是"Win32"、"MacIntel"。有了这个信息，你就能给电脑用户展示大屏版布局，给手机用户自动适配竖屏，避免出现小屏幕上按钮太小的问题。

**联网状态检测**

有时候网页需要提醒用户“当前网络不佳，部分功能可能无法使用”，navigator.onLine属性就能帮你：它返回true表示联网，false表示断网。比如你可以给这个属性加个监听，当用户突然断网时，在页面顶部弹出一个醒目的提示，不用让用户刷新页面才发现问题。

注意：别滥用“信息获取”

虽然JavaScript能拿到浏览器信息，但开发时要注意两个小细节：一是userAgent可以被浏览器修改，比如有些用户会把Chrome伪装成其他浏览器，所以用它判断浏览器版本时，最好做容错处理，不要写死依赖；二是不能过度获取隐私信息，比如不能偷偷获取用户的地理位置，除非用户主动授权，否则会违反浏览器的安全规则。

比如做一个天气类网页，你可以用navigator.language自动匹配用户所在地区的语言，用navigator.onLine提醒用户如果断网就无法更新天气数据，但绝对不能在用户没同意的情况下，通过navigator偷偷获取用户的位置信息。

总的来说，navigator就像浏览器给开发者的“贴心小助手”，用它的几个常用属性，就能轻松获取浏览器、设备、网络等关键信息，帮你打造更适配用户的网页。只要注意避开滥用隐私的坑，就能把这个工具用得恰到好处。