浏览器统计

浏览器统计

浏览器统计是 Web 分析的基础,通过统计用户使用的浏览器类型、版本与占比,指导前端兼容性测试与功能开发优先级。

1. 浏览器市场份额

# 2026 年主流浏览器份额(示例)
Chrome      约 65%
Safari      约 18%
Edge        约 5%
Firefox     约 3%
其他        约 9%

# 数据来源
StatCounter / W3Counter / CanIUse

2. 统计指标

# 浏览器维度
浏览器名称、版本、内核(Blink/WebKit/Gecko)

# 设备维度
桌面 / 移动 / 平板

# 地区维度
国家、城市

# 访问维度
访问量、访客数、停留时长、跳出率

3. 统计工具

# 工具对比
Google Analytics     全面但受隐私法规影响
百度统计             中文站点常用
Matomo               开源自托管
Plausible            轻量隐私友好
Cloudflare Analytics 简单免费

# 自建统计(JS 埋点)
fetch("/api/track", {
    method: "POST",
    body: JSON.stringify({
        browser: navigator.userAgent,
        page: location.pathname
    })
})

4. 浏览器识别(JS)

// 获取浏览器信息
const ua = navigator.userAgent;
console.log(ua);

// 判断 Chrome
const isChrome = /Chrome\//.test(ua) &&
    !/Edg\//.test(ua);
// 判断 Edge
const isEdge = /Edg\//.test(ua);
// 判断 Firefox
const isFirefox = /Firefox\//.test(ua);
// 判断 Safari
const isSafari = /Safari\//.test(ua) &&
    !/Chrome\//.test(ua);

5. 统计的应用

  • 确定浏览器兼容性测试矩阵
  • 评估是否还支持旧版浏览器
  • 移动端占比决定移动优先策略
  • 监控浏览器版本升级情况

操作系统统计

操作系统统计

1. 操作系统份额

# 桌面操作系统(示例)
Windows     约 72%
macOS       约 15%
Linux       约 4%
ChromeOS    约 2%

# 移动操作系统
Android     约 71%
iOS         约 28%

2. 识别操作系统(JS)

// navigator.userAgentData(新版,Chromium)
const ua = navigator.userAgent;

// Windows
const isWindows = /Windows/i.test(ua);
// macOS
const isMac = /Macintosh|Mac OS X/i.test(ua) &&
    !/iPhone|iPad|iPod/i.test(ua);
// Linux
const isLinux = /Linux/i.test(ua) &&
    !/Android/i.test(ua);
// Android
const isAndroid = /Android/i.test(ua);
// iOS
const isIOS = /iPhone|iPad|iPod/i.test(ua);

// 新版 API(Chrome 93+)
const uaData = navigator.userAgentData;
uaData.getHighEntropyValues(["platform"])
  .then(data => console.log(data.platform));

3. 操作系统版本

# Windows 版本
Windows 11 / Windows 10 / Windows 8.1
# ua 中: Windows NT 10.0

# macOS 版本
Sonoma / Ventura / Monterey
# ua 中: Mac OS X 10_15_7

# Android 版本
Android 14 / 13 / 12

# iOS 版本
iOS 18 / 17 / 16

4. 操作系统与 Web 开发

  • 字体渲染差异(macOS 抗锯齿更平滑)
  • 滚动条样式差异
  • 文件下载路径与权限
  • 字体加载(Windows 微软雅黑/macOS 苹方)
  • 键盘快捷键差异(Cmd vs Ctrl)
// 显示对应快捷键
const isMac = /Mac/i.test(navigator.userAgent);
const copyShortcut = isMac ? "Cmd+C" : "Ctrl+C";

屏幕分辨率统计

屏幕分辨率统计

1. 分辨率概念

# 屏幕分辨率
1920x1080(Full HD)
2560x1440(2K)
3840x2160(4K)
1366x768(常见笔记本)

# 移动端
390x844(iPhone 14)
375x812(iPhone X)
412x915(Android 常见)

2. 获取分辨率(JS)

// 屏幕分辨率(物理像素)
const screenRes = screen.width + "x" + screen.height;
console.log(screenRes);

// 可用区域(不含任务栏)
const avail = screen.availWidth + "x" + screen.availHeight;

// 窗口尺寸(视口)
const viewport = window.innerWidth + "x" + window.innerHeight;

// 设备像素比
const dpr = window.devicePixelRatio;
console.log("DPR:", dpr);   // 1x / 2x / 3x

// 物理像素 = CSS 像素 × DPR

3. 响应式设计

/* 媒体查询断点 */
/* 手机 */
@media (max-width: 767px) { ... }

/* 平板 */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* 桌面 */
@media (min-width: 1024px) { ... }

/* 高分屏适配 */
/* 使用矢量图 SVG / 高分辨率图片 */
img { srcset: "img-1x.png 1x, img-2x.png 2x" }

4. 分辨率统计应用

  • 确定响应式断点
  • 测试重点分辨率截图
  • 统计主流设备尺寸
  • 大屏(4K)适配检查
// 统计上报
fetch("/api/track", {
    method: "POST",
    body: JSON.stringify({
        screen: screen.width + "x" + screen.height,
        viewport: window.innerWidth + "x" + window.innerHeight,
        dpr: window.devicePixelRatio
    })
});

移动设备统计

移动设备统计

1. 移动端重要性

# 全球流量中移动端占比超过 60%
# 中国移动端占比更高(约 80%)

# 移动设备分类
手机 / 平板 / 可穿戴

# 平台
Android / iOS / HarmonyOS

2. 识别移动设备(JS)

const ua = navigator.userAgent;

// 是否为移动设备
const isMobile = /Android|iPhone|iPad|iPod/i.test(ua);

// 更精确:mobile 属性
const isMobile2 = navigator.userAgentData?.mobile;

// 平板 vs 手机
const isTablet = /iPad/i.test(ua) ||
    (/Android/i.test(ua) && !/Mobile/i.test(ua));
const isPhone = /iPhone/i.test(ua) ||
    (/Android/i.test(ua) && /Mobile/i.test(ua));

3. 移动端适配

<!-- viewport 设置(必备) -->
<meta name="viewport" content="width=device-width,
    initial-scale=1.0, viewport-fit=cover">

<!-- 触摸事件 -->
touchstart / touchmove / touchend

<!-- 点击延迟 -->
/* 使用 pointer 事件统一处理 */

/* 防止缩放 */
user-select: none;
-webkit-touch-callout: none;

4. 移动端统计指标

# 设备型号
iPhone 15 / Xiaomi 14 / Huawei Mate 60

# 屏幕尺寸
6.1寸 / 6.7寸

# 网络类型
5G / 4G / WiFi

# 运营商
移动 / 联通 / 电信

5. 移动端最佳实践

  • 移动优先设计(Mobile First)
  • 图片懒加载与压缩
  • 触控目标 ≥ 44px
  • 避免 hover 依赖
  • 测试真实设备 + 模拟器

IE 浏览器

IE 浏览器

1. IE 简介

# Internet Explorer(1995-2022)
IE 6/7/8/9/10/11 是曾经的浏览器霸主

# 历史节点
1995  IE 1.0 随 Windows 95 发布
2002  IE 6 份额达 90%+
2015  微软推出 Edge 取代 IE
2022  IE 11 正式停止支持(2022-06-15)

# 现代网站已无需支持 IE

2. 检测 IE

// 检测 IE 11(唯一还在使用的版本)
const isIE11 = !!window.MSInputMethodContext &&
    !!document.documentMode;

// 检测任意 IE
const isIE = /MSIE|Trident\//.test(navigator.userAgent);

// documentMode
// IE8: 8, IE9: 9, IE10: 10, IE11: 11
const mode = document.documentMode;
if (mode) {
    console.log("IE 版本:", mode);
}

3. IE 兼容性问题

# 不支持的现代特性
ES6+ 语法(箭头函数、Promise 部分)
Flexbox(IE11 有 bug)
CSS Grid(不支持)
fetch API(需 polyfill)
CSS 变量(不支持)

# 常见 polyfill
babel-polyfill
core-js
whatwg-fetch
html5shiv(HTML5 标签)

4. IE 专属代码

<!-- 条件注释(仅 IE9 及以下) -->
<!--[if lt IE 9]>
  <script src="html5shiv.min.js"></script>
<![endif]-->

/* IE 专属样式 */
.selector {
    /* 标准写法 */
    display: flex;
}
/* IE 兼容写法 */
.selector {
    display: -ms-flexbox;   /* 前缀 */
}

5. IE 退役建议

  • 新项目无需兼容 IE
  • 存量系统逐步迁移
  • 使用 Edge 的 IE 模式过渡
  • 检测 IE 显示升级提示
// 提示用户升级浏览器
if (isIE) {
    document.body.innerHTML =
        "请使用 Chrome/Edge 等现代浏览器访问";
}

Firefox 浏览器

Firefox 浏览器

1. Firefox 简介

# Mozilla Firefox
2004 年发布(原名 Phoenix/Firebird)
基于 Gecko 内核
开源,由 Mozilla 基金会维护
强调隐私保护

# 版本
Firefox 130+(2024 后版本)
Firefox ESR(企业稳定版)

2. 检测 Firefox

// UserAgent 检测
const isFirefox = /Firefox\//.test(navigator.userAgent);

// 获取版本
const match = navigator.userAgent.match(/Firefox\/([\d.]+)/);
const version = match ? match[1] : null;

// 新版 API(需支持)
// navigator.userAgentData 不含 Firefox
// 用 UA 为主

3. Firefox 特性

# 隐私保护
Enhanced Tracking Protection(ETP)
Total Cookie Protection

# 开发者工具
页面检查器、CSS Grid 调试、性能分析

# 现代 CSS 支持
container queries、:has()、subgrid 等

# Web 标准推动
WASM、WebAuthn、AV1 等

4. Firefox 兼容性注意

/* 私有前缀(部分场景) */
.selector {
    -moz-osx-font-smoothing: grayscale;  /* 已移除 */
    scrollbar-width: thin;  /* Firefox 滚动条 */
    scrollbar-color: #888 #eee;
}

/* 目前主流特性 Firefox 均支持
   主要差异: 字体渲染、滚动条样式 */

5. 开发建议

  • 跨浏览器测试包含 Firefox
  • 使用 CSS 标准写法(避免只测 Chrome)
  • 关注 MDN 兼容性表
  • Firefox 对某些特性实现更严格
// 兼容性查询工具
// MDN: developer.mozilla.org
// CanIUse: caniuse.com

Chrome 浏览器

Chrome 浏览器

1. Chrome 简介

# Google Chrome
2008 年发布
基于 Blink 内核(WebKit 分支)
市场份额约 65%,全球第一
以速度、稳定、安全著称

# 版本节奏
约每 4 周一个主版本
Chrome 126(2024 年)

2. 检测 Chrome

// UserAgent 检测(注意 Edge 也含 Chrome)
const ua = navigator.userAgent;
const isChrome = /Chrome\//.test(ua) &&
    !/Edg\//.test(ua) &&     // Edge
    !/OPR\//.test(ua) &&     // Opera
    !/SamsungBrowser/i.test(ua);

// Chromium 内核判断
const isChromium = /Chrome\//.test(ua) ||
    /Chromium\//.test(ua);

// 获取版本
const m = ua.match(/Chrome\/([\d.]+)/);
const version = m ? m[1] : null;

3. Chrome 领先特性

# Web 平台
CSS Container Queries
CSS Nesting
:has() 选择器
WebGPU
File System Access API

# 性能
V8 JS 引擎
Preload/Prefetch 优化
Back/Forward Cache

4. Chrome 专属工具

# DevTools(开发者工具)
F12 打开
- Elements 元素检查
- Console 控制台
- Network 网络分析
- Performance 性能分析
- Lighthouse 审计
- Device Mode 设备模拟

# 常用技巧
- 复制元素选择器
- 监听事件(Event Listeners)
- 性能录制与分析
- 断点调试

5. 开发建议

  • Chrome 是主要开发调试浏览器
  • 新特性先在 Chrome 验证再普及
  • 注意与其他浏览器差异(滚动条、字体)
  • 关注 Chrome 版本弃用公告

Safari 浏览器

Safari 浏览器

1. Safari 简介

# Apple Safari
2003 年发布,苹果默认浏览器
基于 WebKit 内核
macOS/iOS/iPadOS 内置
市场份额约 18%(全球第二)

# 版本
Safari 17(2023)/ 18(2024)

2. 检测 Safari

// UA 检测(注意 iOS 上所有浏览器 UA 都含 Safari)
const ua = navigator.userAgent;
const isSafari = /Safari\//.test(ua) &&
    !/Chrome\//.test(ua) &&    // Chrome/Edge
    !/CriOS\//.test(ua) &&     // iOS Chrome
    !/FxiOS\//.test(ua);       // iOS Firefox

// 是否 iOS
const isIOS = /iPhone|iPad|iPod/i.test(ua);

// 版本
const m = ua.match(/Version\/([\d.]+)/);
const version = m ? m[1] : null;

3. Safari 特性与差异

# 特性
- WebKit 引擎
- iCloud 钥匙串/密码管理
- 阅读模式
- 隐私报告

# 与其他浏览器差异
- 字体渲染不同(macOS 抗锯齿)
- -webkit- 前缀仍常见
- 部分新 API 支持滞后
- 100vh 高度问题(iOS 地址栏)

4. Safari 兼容性注意

/* iOS 100vh 问题 */
.hero {
    height: 100vh;       /* 含地址栏 */
    height: 100dvh;      /* 动态视口(新) */
}

/* -webkit- 前缀 */
input[type="range"] {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
    width: 8px;
}

/* Safari 对部分 ES 特性支持较晚
   检查 CanIUse 确认 */

5. 开发建议

  • macOS/iOS 用户占比高的站点必测 Safari
  • 用 Safari 技术预览版提前测新特性
  • 注意 iOS 上 localStorage 清理策略
  • 测试 iOS Safari 的滚动性能

Opera 浏览器

Opera 浏览器

1. Opera 简介

# Opera
1996 年发布,历史悠久的浏览器
2013 年转向 Blink 内核(Chromium)
份额较小(约 2-3%)

# 特色功能
内置广告拦截
免费 VPN(部分地区)
侧边栏应用
工作区
电池省电模式

2. 检测 Opera

// UA 检测
const ua = navigator.userAgent;
const isOpera = /OPR\//.test(ua) ||   // Opera 15+
    /Opera\//.test(ua);               // 旧版

// Opera Mini
const isOperaMini = /Opera Mini/i.test(ua);

// 获取版本
const m = ua.match(/OPR\/([\d.]+)/);
const version = m ? m[1] : null;

3. Opera 特色

# 内置功能
- 广告拦截器
- 跟踪器拦截
- 免费 VPN
- 流量节省模式
- 快速拨号

# 开发者友好
- 基于 Chromium,兼容 Chrome 扩展
- DevTools 与 Chrome 类似

4. 兼容性

# 基于 Blink 内核
# 大部分 Chrome 特性 Opera 都支持

# 注意
- Opera Mini 使用服务器渲染,差异大
- 旧版 Opera(12-)使用 Presto 内核

# 检测建议
if (isOperaMini) {
    // 简化页面,减少 JS 依赖
}

Mozilla 项目

Mozilla 项目

1. Mozilla 简介

# Mozilla 基金会
1998 年成立,非营利组织
使命:保持互联网开放与自由

# 主要产品
Firefox 浏览器
Thunderbird 邮件客户端
MDN Web 文档
Rust 语言
Common Voice(语音数据集)

2. Mozilla 技术

# Gecko 引擎
Firefox 内核
# Quantum 项目
Firefox 57+ 的现代引擎(多进程)

# Rust
Mozilla 2015 年推出的系统语言
现在由 Rust 基金会维护

# WebAssembly
Mozilla 推动的浏览器字节码标准

# Servo
实验性并行浏览器引擎(Rust 编写)

3. MDN Web 文档

# MDN(Mozilla Developer Network)
# developer.mozilla.org

# 内容
HTML/CSS/JS 参考文档
兼容性表(Browser compatibility)
Web API 文档
教程与指南

# 前端开发者必查资源
# 与 CanIUse 配合使用

4. Mozilla 开源生态

# GitHub 项目
github.com/mozilla

# 知名项目
Firefox(firefox-ios / fenix)
MDN(yari 文档平台)
Thunderbird
WebThings(物联网)
WebExtension 标准

5. 对 Web 的贡献

  • 推动 Web 标准开放
  • 隐私保护工具(ETP)
  • 开发者文档体系(MDN)
  • 新兴技术孵化(Rust/WASM)

Netscape 浏览器

Netscape 浏览器

1. Netscape 简介

# Netscape Navigator
1994 年发布,第一代主流浏览器
1990 年代市场份额超 90%
是浏览器历史上最重要的产品之一

# 时间线
1994  Navigator 1.0
1995  Navigator 2.0(引入 JavaScript、Cookie)
1998  被 AOL 收购
2008  停止维护

# 遗产
- JavaScript(由 Netscape 发明,现为 ECMAScript)
- Cookie
- SSL(https 前身)

2. 历史意义

# 开创性
- 首个图形界面浏览器
- 网页源码查看功能
- JavaScript 的诞生地
- 推动 W3C 标准形成

# 浏览器大战
- 与 IE 的第一次浏览器大战(1995-2000)
- 催生 Web 标准运动
- 最终开源 → 成为 Mozilla 的基础

3. 技术遗产

# JavaScript
Netscape 委托 Brendan Eich
10 天设计出 JavaScript(1995)

# Cookie
Netscape 首创(1994)
用于购物车状态保存

# 其他
- HTML 框架(frameset)
- 插件机制(后来被 WebExtensions 取代)
- JavaScript 引擎(后来的 SpiderMonkey)

4. 现代影响

# Firefox 的祖先
Netscape 开源 → Mozilla → Firefox

# 现代前端
- ECMAScript 标准持续演进(ES6+)
- 浏览器 API 百花齐放
- WebAssembly 新纪元

# 纪念
# 检测代码中不再需要 Netscape
# 它已彻底退役

Edge 浏览器

Edge 浏览器

1. Edge 简介

# Microsoft Edge
2015 年随 Windows 10 发布
2019 年转向 Chromium 内核(EdgeHTML 废弃)
2020 年正式推出新版 Edge
是 Windows 默认浏览器

# 版本
Edge 126+(与 Chromium 同步)

2. 检测 Edge

// UA 检测
const ua = navigator.userAgent;
const isEdge = /Edg\//.test(ua) ||
    /EdgA\//.test(ua) ||    // Android
    /EdgiOS\//.test(ua);    // iOS

// 获取版本
const m = ua.match(/Edg\/([\d.]+)/);
const version = m ? m[1] : null;

// 注意:新版 Edge UA 同时含 Chrome 字样
// 因此判断 Edge 必须在判断 Chrome 之前
const isChrome = /Chrome\//.test(ua) && !isEdge;

3. Edge 特性

# 基于 Chromium
- 兼容 Chrome 扩展
- 与 Chrome 一致的渲染

# 独有功能
- 集锦(Collections)收藏
- 垂直标签页
- 睡眠标签页(省内存)
- 朗读功能
- IE 模式(兼容老系统)

4. Edge 兼容性

# 基于 Blink 内核
# 与 Chrome 基本一致,无需特殊处理

# 注意
- WebView2(Edge 内核嵌入)常用于桌面应用
- IE 模式模拟 IE11 渲染(企业遗留)
- 检查 UA 时顺序: Edge → Chrome

5. 开发建议

// UA 检测顺序(重要)
const ua = navigator.userAgent;
const isEdge = /Edg\//.test(ua);
const isOpera = /OPR\//.test(ua);
const isChrome = !isEdge && !isOpera &&
    /Chrome\//.test(ua);

# Windows 用户占比高时,Edge 值得重视
# 基于 Chromium,测试成本低(与 Chrome 同源)
第 1 / 12 节