BOM之navigator对象和用户代理检测

BOM指的是浏览器对象模型（Browser Object Model），是由浏览器厂商提供的一组API接口，用于JavaScript与浏览器交互，包括DOM、window对象、navigator对象等。其中，navigator对象用于获取有关浏览器的信息，用户代理检测可以通过这个对象获取当前浏览器的信息。

navigator对象

navigator对象提供了一系列属性和方法用于获取当前浏览器的信息，如浏览器名称、版本号、支持的插件等。以下是一些常用的属性和方法：

1. navigator.userAgent：获取包含浏览器名称、版本号、操作系统等信息的字符串。
2. navigator.appName：获取浏览器名称。
3. navigator.appVersion：获取浏览器版本号。
4. navigator.platform：获取操作系统平台。
5. navigator.plugins：获取支持的插件列表。
6. navigator.language：获取浏览器使用的语言。

例子1：输出浏览器名称和版本号

console.log(`浏览器名称：${navigator.appName}`);
console.log(`浏览器版本号：${navigator.appVersion}`);

例子2：检测是否为移动设备

const isMobile = /Android|webOS|iPhone|iPad|/i.test(navigator.userAgent);
if (isMobile) {
  console.log('当前设备为移动设备');
} else {
  console.log('当前设备为桌面设备');
}

用户代理检测

用户代理是指浏览器发送给服务器的HTTP请求头中包含的字段，用于标识浏览器的名称、版本号和操作系统等信息，这些信息也可以通过navigator.userAgent获取。

用户代理检测是指通过判断用户代理来确定浏览器类型和功能支持，以便向用户提供最佳的用户体验。但是，作为一种检测浏览器能力的方法，用户代理检测并不是完美的，因为用户代理可以被伪造或篡改。

以下是一些常用的用户代理检测方法：

1. 检测是否为IE浏览器：

const isIE = /MSIE|Trident/i.test(navigator.userAgent);
if (isIE) {
  console.log('当前浏览器为IE浏览器');
} else {
  console.log('当前浏览器不是IE浏览器');
}

1. 检测是否支持webP格式图片：

const isSupportWebP = (() => {
  const canvas = document.createElement('canvas');
  if (canvas.getContext && canvas.getContext('2d')) {
    return canvas.toDataURL('image/webp').indexOf('data:image/webp') == 0;
  }
  return false;
})();
if (isSupportWebP) {
  console.log('当前浏览器支持webP格式图片');
} else {
  console.log('当前浏览器不支持webP格式图片');
}

以上是BOM之navigator对象和用户代理检测的完整攻略，需要注意的是，用户代理检测不应该成为识别浏览器的唯一方法，应该采用现代化的浏览器技术，比如使用feature detection检测浏览器支持的特性。