随着 Apple 转向自研的 Apple Silicon（如 M1、M2）芯片架构，前端开发者和技术支持人员有时需要在网页端判断用户的 Mac 是基于 Intel 还是 Apple Silicon。本文将介绍一个利用 JavaScript + WebGL 的方法，在用户访问网页时识别其 Mac 架构。
背景
macOS 设备目前可能运行在两种硬件架构上：
- Intel 架构：老款 Mac，使用 Intel CPU。
- Apple Silicon 架构：新款 Mac，使用 M1/M2/M3/M4 等 ARM 架构芯片。
为了提升用户体验或适配不同架构特性的功能（如性能优化或原生支持），识别设备架构变得重要。
技术思路
此方法通过以下几个浏览器特性综合判断：
- 用户代理和平台判断：判断当前系统是否是 Mac。
- 判断是否是 Safari 浏览器：Safari 浏览器的特性不同，需区别处理。
- WebGL 获取 GPU 渲染器信息：非 Safari 浏览器中，GPU 名称通常可用于判断架构。
- 检测 PVRTC 纹理扩展支持：Safari 中 Apple GPU 才支持
WEBKIT_WEBGL_compressed_texture_pvrtc扩展。
核心代码逻辑解析
1. 判断是否是 Mac 和 Safari 浏览器：
const ua = navigator.userAgent;
const isSafari = /Safari/.test(ua) && !/Chrome|Chromium|Edg|OPR|CriOS|FxiOS|SamsungBrowser/.test(ua);
const isMac = navigator.platform === 'MacIntel';
2. 获取 WebGL 渲染器信息：
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
const ext = gl.getExtension('WEBGL_debug_renderer_info');
const renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
3. Safari 下使用 PVRTC 扩展判断：
const applePVRTC = gl.getExtension('WEBKIT_WEBGL_compressed_texture_pvrtc');
const hasApplePVRTC = !!applePVRTC;
4. 架构判断逻辑：
-
在 非 Safari 浏览器中，通过 GPU 渲染器名称判断：
- 渲染器名称包含 "Apple M1/M2/M3/M4" → Apple Silicon
- 渲染器包含 "Intel"/"AMD"/"NVIDIA" → Intel
-
在 Safari 中，通过 PVRTC 扩展支持判断：
- 支持 → Apple Silicon
- 不支持 → Intel
5. 输出结果：
resultEl.textContent = `
isMac: ${isMac}
isSafari: ${isSafari}
hardwareConcurrency: ${cores}
renderer: ${renderer}
${isSafari ? `Apple PVRTC: ${hasApplePVRTC}` : ''}
>>> 识别结果：${arch}
`.trim();
示例输出
isMac: true
isSafari: true
hardwareConcurrency: 8
renderer: Apple M2
Apple PVRTC: true
>>> 识别结果：Apple Silicon (Safari based on PVRTC)
总结
本方法利用浏览器端技术，在无需用户安装额外插件的前提下，实现对 Mac 架构的高可靠性判断：
| 条件 | 推测架构 |
|---|---|
| GPU 渲染器包含 Apple M | Apple Silicon |
| GPU 渲染器包含 Intel/AMD/NVIDIA | Intel |
| Safari 且支持 PVRTC | Apple Silicon |
| Safari 且不支持 PVRTC | Intel |
适用于前端性能优化、插件兼容判断、平台提示等应用场景。
