作为开发者或者设计师，浏览器兼容性问题是一个常见的难题。而一种简单而有效的解决方法是使用navigator.useragent。本文将向您介绍什么是navigator.useragent，以及如何利用它来调试浏览器兼容问题。

一、Navigator对象

在HTML DOM（文档对象模型）中，有一个专门处理浏览器间差异的对象——Navigator对象。Navigator对象反映了当前窗口所在浏览器的状态和属性。其中，navigator.userAgent是Navigator对象的一个属性，它返回用户代理头的值，其中包括浏览器、版本信息和操作系统。

二、userAgent属性

User-Agent字符串可以说是一个标识客户端浏览器和操作系统的字符串，这是 HTTP 协议的一个必选字段，据此服务器可以发送不同的页面给不同的浏览器。

举个栗子，当我们使用Chrome浏览器访问 “http://www.baidu.com”后面的请求头就会包含User-Agent字段，如下图所示。


下面我们结合代码来看一下如何获取userAgent。

```js

console.log(navigator.userAgent);

```

如果你在浏览器中运行上述代码，你会得到类似下面的输出：


从上图中我们可以看到：

1. Browser版本：Mozilla/5.0，Windows NT 10.0

2. Chrome版本：AppleWebKit/537.36

3. Chrome内核版本：(KHTML, like Gecko)

4. Chrome浏览器版本：Chrome/70.0.3538.77

5. Safari版本：Safari/537.36

三、Navigator对象的属性

Navigator对象还有其他一些属性：

• appCodeName：返回浏览器的代码名

• appName：返回浏览器的名称

• appVersion：返回浏览器的版本号

• cookieEnabled：判断浏览器的cookie是否启用

• geolocation：返回可以定位用户位置的对象

• language：返回浏览器的语言

• mimeTypes：返回浏览器的所有插件的MIME类型

• onLine：判断客户端是否在线

• platform：返回运行浏览器的操作系统平台

• userAgent：返回由客户端发送服务器的 user-agent 头部的值,

本文重点介绍其中的userAgent属性。

四、应用场景

在移动端 H5 开发过程中，客户端 Android 和 IOS 这两种操作系统的资源加载、css 渲染、界面适配等方面问题总是让人头痛不已。通过 user-agent 可以很方便的识别出客户端的操作系统和浏览器类型及版本信息，从而进行适配。其实前端处理验证码的时候也可以使用到。

五、案例分析

我们常常会因为一些兼容性问题比如上报问题而需要知道用户的Device Ua信息。Device Ua信息对于分析问题的原因及定位问题的贡献是非常大的，比如在开发广告的时候，知道了用户的Device Ua信息后，我们就可以定向的为不同的用户投放不同的广告。

下面我们使用JavaScript来获取DeviceUa信息。

1. 首先我们可以写一个全屏遮罩，让客户端跳转到一个另外的网站，这个网站是我们自己的，可以根据收到的信息记录用户的device_ua。

下面是一个简单的例子：

```html

Please wait, you will be redirected to the verification site soon...