安卓还是苹果？设备检测网站原理分析

网页应用技术分析

1. 页面逻辑分析

访问此项目的Github地址

页面截图

该网页应用的执行逻辑是一个精确控制的、分阶段的状态流程，具体如下：

  1. 初始化与基础检测:

    • 页面加载完成 (DOMContentLoaded) 后，runOnce() 函数启动，调用 detect() 函数执行第一轮基础检测。
    • UI在此阶段显示加载状态，并通过 addStep() 函数将每一步检测的细节实时渲染到“检测过程”卡片中。
    • 检测结束后，“检测结果”卡片会更新，展示初步识别的操作系统、置信度及各系统得分。
    • AudioManager 类被实例化，并设置用户交互监听器，为后续音频播放做准备。

  2. 用户交互与高级检测:

    • 基础检测完成后，“高级检测”按钮解锁。
    • 用户点击该按钮后，performAdvancedDetection() 函数被调用，启动第二轮高级检测，利用Client Hints和WebAuthn API进行更深度的分析。

  3. 结果裁定与篡改分析:

    • 高级检测完成后，程序会将其结果与基础检测的结果进行严格比对。
    • 若结果不一致：程序判定环境可能被篡改。此时会优先采信更可靠的高级检测结果，并通过applyTamperedTheme()将页面UI切换至红色警告主题，同时弹出安全警示。
    • 若结果一致：确认检测结果，并以高置信度展示。

  4. 沉浸式体验触发:

    • 无论最终结果如何（包括篡改模式），程序都会根据裁定的操作系统，启动一套视听反馈：
      • audioManager.playForOS(): 播放与操作系统主题匹配的背景音乐。
      • startDanmuForOS(): 触发持续约5秒的“弹幕雨”，内容根据操作系统和检测模式动态生成。
      • showBigMessageCard(): 弹幕结束后，显示一个包含核心文案的大尺寸信息卡片。

  5. 无限循环模式:

    • 初始体验结束后，startInfiniteLoop() 函数被调用，页面进入一个持续的循环状态。
    • 该循环以“**持续的稀疏弹幕 (3秒) -> WebGL 3D动画 (5秒)**”的模式交替执行。
    • 关键逻辑: shouldDisableCanvas() 函数会判断，若最终检测结果为任何Apple设备 (iOS, iPadOS, macOS)，则完全跳过WebGL渲染阶段，只执行弹幕循环，这是一种针对性的性能优化策略。

2. 检测逻辑分析

应用的检测逻辑是其核心竞争力，分为两个层次，以实现从模糊推断到高精度确认。

2.1 基础检测逻辑 (detect 函数)

此阶段采用基于特征的加权评分机制。

  • 评分系统: 为每个目标操作系统（Android, iOS, macOS, Windows, Linux）建立分数累加器。
  • 多维度信号源 (Signals):
    • 输入设备: 通过 navigator.maxTouchPoints 和 pointer 媒体查询，区分移动触控设备和桌面指针设备。
    • 平台专属特征: 探测如 ApplePaySession API (Apple)、NDEFReader (Android)、以及特定于WebKit内核的私有CSS属性等强排他性信号。
    • WebGL渲染器指纹: 这是价值最高的信号源之一。通过 WEBGL_debug_renderer_info 扩展获取GPU的供应商（Vendor）和渲染器（Renderer）字符串。
      • 包含 Apple -> 指向苹果设备。
      • 包含 Direct3D 或 D3D -> 强指向Windows。
      • 包含 Mesa, X.Org, llvmpipe -> 强指向Linux。
  • 决策机制:
    • 所有检测完成后，分数最高的系统胜出。
    • 若出现平局，则使用传统的 navigator.userAgent 字符串进行二次裁定。
2.2 高级检测逻辑 (performAdvancedDetection 函数)

此阶段使用更现代、更难伪造的API进行验证。

  • User-Agent Client Hints API: 通过 navigator.userAgentData.getHighEntropyValues() 请求高精度的结构化信息，如 platform、platformVersion等，可靠性远超传统UA字符串。
  • WebAuthn (PASSKEY) API: 这是检测的“杀手锏”。通过调用 PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() 来检查设备是否支持硬件级别的平台认证器（如Face ID, Windows Hello）。
    • 原理: 这是一个与硬件和操作系统底层深度绑定的功能，几乎无法通过软件伪造。它提供了判断真实操作系统的“地面真实”（Ground Truth）信息。
    • 篡改检测的核心: 将此API返回的强信号与充满不确定性的基础检测结果进行比对，是实现篡改检测功能的技术基础。

3. 造成页面卡顿的原理分析

该应用通过两种资源密集型任务的组合与循环，能在多数非高性能设备上造成显著卡顿。

  1. WebGL的高强度GPU负载:

    • 复杂的片段着色器 (Fragment Shader): 性能瓶颈的核心在于FSHADER_SOURCE中的kernal函数。该函数为1024x1024画布上的每一个像素执行高成本的实时数学运算以生成分形图像，产生巨大的GPU计算压力。
    • 高频重绘: requestAnimationFrame 创建了一个渲染循环，理论上每秒执行约60次，导致GPU持续处于高负载状态。

  2. 弹幕系统的高频CPU负载:

    • 海量DOM操作: 弹幕效果通过JavaScript在短时间内动态创建、注入、动画化并销毁成百上千个<div>元素。
    • 强制回流与重绘 (Reflow & Repaint): 大规模的DOM结构变化，会频繁强制浏览器重新计算页面布局（回流）和重新绘制像素（重绘）。这是浏览器渲染流程中最耗费CPU资源的操作，极易导致UI线程阻塞，从而引发页面卡顿。

  3. 无限循环的“组合拳”效应:

    • startInfiniteLoop 函数的设计是压垮设备性能的关键。它让GPU密集型任务（WebGL）和CPU密集型任务（弹幕）以固定间隔交替执行。
    • 这种机制使设备的CPU和GPU都无法获得空闲，持续处于高资源消耗状态。两种不同类型的负载交替冲击，加剧了系统资源的调度压力，最终导致用户可感知的严重卡顿甚至假死现象。

  4. 临时禁用 WebGL 渲染：

    • 使用 index.html?disablecanvas 访问即可。