设备仿真：触摸事件、屏幕度量与移动设备身份

介绍

浏览器通过几十种信号暴露其所运行的设备：屏幕尺寸、设备像素比、触摸能力、设备内存、GPU 特性、输入方式等。这些信号共同形成对运行浏览器的物理设备的完整描述。Pixel 7 有特定的屏幕尺寸、特定的 DPR、特定的触点数量、特定的 GPU 和特定的内存。当这些信号一致时，浏览器看起来像运行在真实硬件上；当它们冲突时，不一致会显而易见。

BotBrowser 加载从真实硬件捕获的完整设备配置文件。当在桌面系统上加载移动配置文件时，所有设备信号会一致更新，因为它们都来自同一源设备。没有混搭、没有逐项手动配置，也没有信号冲突的风险。

隐私影响：为什么设备信号重要

设备仿真重要性超出仅仅表现为移动或桌面浏览器的范畴。

追踪系统将设备信号作为指纹的一部分。屏幕分辨率、DPR、触摸支持、设备内存、GPU 渲染器与 CPU 核心数的组合会形成一个设备级别的指纹并在会话间持久存在。控制这些信号对于维持一致的浏览器身份及研究追踪系统如何利用设备特征至关重要。

电子商务和内容平台会根据检测到的设备提供不同体验。移动用户可能看到不同的价格、不同的布局和不同的内容选择。隐私研究者需要准确的设备仿真来可靠地研究这些做法。

对于多账号管理，设备多样性也很重要。每个身份都呈现相同设备模型且屏幕尺寸完全一致会显得可疑。使用多种设备配置文件、混合桌面与移动、不同屏幕与不同 DPR，会产生自然的变异。

技术背景

浏览器中的设备信号

浏览器通过多个 API 暴露设备特征：

屏幕尺寸：screen.width、screen.height、screen.availWidth、screen.availHeight 报告物理显示尺寸。window.innerWidth 与 window.innerHeight 报告视口。window.outerWidth 与 window.outerHeight 包含浏览器 chrome。

设备像素比：window.devicePixelRatio 报告 CSS 像素与物理像素的比例。桌面显示器通常为 1.0 或 1.25，移动设备通常为 2.0 到 3.5 或更高，Retina MacBook 为 2.0。

触摸能力：navigator.maxTouchPoints 报告最大同时触点数（桌面为 0，移动为 5-10）。window 对象上是否存在 ontouchstart 事件处理器指示触摸支持。CSS 媒体查询 (pointer: coarse) 和 (hover: none) 用于区分触摸主导与指针主导输入。

设备内存：navigator.deviceMemory 报告近似 GB 数。移动设备通常为 4-8 GB，桌面为 8-16 GB。

硬件并发：navigator.hardwareConcurrency 报告可用 CPU 核心数。移动设备典型为 4-8，桌面为 4-16 或更多。

连接信息：navigator.connection 提供网络类型、有效类型、下行带宽与 RTT。移动设备通常报告不同的网络特性。

GPU：WebGL renderer 字符串标识显卡硬件。移动 GPU（Adreno、Mali、PowerVR、Apple GPU）与桌面 GPU（NVIDIA、AMD、Intel）完全不同。

信号一致性要求

这些信号必须在内部保持一致。一个浏览器如果报告 maxTouchPoints: 10 但同时 (pointer: fine) 与 (hover: hover)，则存在矛盾；若报告 412px 屏宽但同时具有 16 GB 内存与 NVIDIA GPU，则将移动屏幕尺寸与桌面硬件特征混合，这些不一致表明信号被伪造而非来自真实设备。

常见方法及其局限

Chrome DevTools 设备仿真

Chrome DevTools Protocol 提供 Emulation.setDeviceMetricsOverride 来设置视口尺寸、DPR 与触摸支持。Playwright 与 Puppeteer 在其设备仿真 API 中封装了该能力。

局限：

• 不会更改 navigator.platform 或除显式设置外的 User-Agent 数据
• WebGL renderer 字符串仍然报告桌面 GPU
• navigator.deviceMemory 与 navigator.hardwareConcurrency 保持桌面值
• 触摸仿真是表面层的，不是引擎层的
• 字体可用性仍为桌面特有
• 媒体查询可能无法完全与仿真设备对齐

手动属性覆盖

可以通过注入 JavaScript 来覆盖单个属性：

Object.defineProperty(navigator, 'maxTouchPoints', { get: () => 10 });
Object.defineProperty(navigator, 'deviceMemory', { get: () => 4 });

这改变了 JavaScript 可见的值，但不会影响浏览器的实际行为。CSS 媒体查询、渲染流水线与 HTTP 头不会受到 JavaScript 覆盖的影响。

仅视口方法

通过自动化框架设置移动视口大小（如 412x915）会改变布局，但不会改变其他设备信号。浏览器仍报告桌面屏幕尺寸、桌面 DPR、零触点与桌面 GPU 信息。

BotBrowser 的方法

BotBrowser 的配置文件来自真实设备，因此所有设备信号均来自相同物理硬件。无论在何种系统上加载，这些信号都会在引擎层一并应用，确保完全的内部一致性。

基于配置文件的设备身份

每个配置文件包含设备特征快照：

• 屏幕尺寸（width、height、availWidth、availHeight）
• 设备像素比
• 触摸能力（maxTouchPoints、触摸事件支持）
• 设备内存
• 硬件并发
• GPU renderer 与 vendor 字符串
• 平台特定的 navigator 属性
• 窗口 chrome 尺寸（用于计算 outer 尺寸）

这些信号作为一个整体应用，而非单独设置，从而消除了信号冲突的风险。

引擎级触摸支持

当加载移动配置文件时，触摸支持在 Chromium 引擎级别启用，而非通过 JavaScript 注入：

• navigator.maxTouchPoints 返回设备的实际值
• ontouchstart 在 window 对象上原生可用
• CSS 媒体查询 (pointer: coarse) 和 (hover: none) 在样式引擎中正确计算
• 触摸事件构造函数与属性的行为与真实设备一致
• InputDeviceCapabilities API 正确报告触摸能力

桌面、移动与平板配置文件

BotBrowser 支持所有设备类别的配置文件：

桌面配置文件：大屏（1920x1080、2560x1440），DPR 1.0-2.0，零触点，细指针，桌面 GPU，8-16 GB 内存。

移动配置文件：小屏（412x915、390x844），DPR 2.0-3.5，触摸支持 5-10 点，粗指针，移动 GPU，4-8 GB 内存。

平板配置文件：中等屏（1024x1366、820x1180），DPR 2.0，触摸支持，有时同时支持粗指针和细指针，移动或集成 GPU。

窗口与屏幕配置

BotBrowser 通过 CLI 标志对窗口与屏幕属性提供精细控制：

# 使用配置文件捕获的尺寸（headless 的默认）
--bot-config-window=profile
--bot-config-screen=profile

# 指定尺寸
--bot-config-window=1920x1080
--bot-config-screen=2560x1440

# 完整 JSON 自定义
--bot-config-window='{"innerWidth":1920,"innerHeight":1080,"devicePixelRatio":2}'

配置与使用

移动设备配置文件

chrome --bot-profile="/profiles/pixel7-chrome-130.enc" \
       --user-data-dir="$(mktemp -d)"

Playwright 集成

const { chromium } = require('playwright-core');

(async () => {
  const browser = await chromium.launch({
    executablePath: '/path/to/botbrowser/chrome',
    args: [
      '--bot-profile=/profiles/pixel7-chrome-130.enc',
    ],
    headless: true,
  });

  // 重要：不要设置 viewport —— 让配置文件控制它
  const context = await browser.newContext();
  const page = await context.newPage();

  const metrics = await page.evaluate(() => ({
    screenWidth: screen.width,
    screenHeight: screen.height,
    innerWidth: window.innerWidth,
    innerHeight: window.innerHeight,
    dpr: devicePixelRatio,
    touchPoints: navigator.maxTouchPoints,
    touchStart: 'ontouchstart' in window,
    pointer: matchMedia('(pointer: coarse)').matches ? 'coarse' : 'fine',
    hover: matchMedia('(hover: none)').matches ? 'none' : 'hover',
    memory: navigator.deviceMemory,
    cores: navigator.hardwareConcurrency,
  }));

  console.log('Device metrics:', metrics);
  await browser.close();
})();

Puppeteer 使用桌面配置文件

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    executablePath: '/path/to/botbrowser/chrome',
    args: [
      '--bot-profile=/profiles/win11-desktop-1080p.enc',
    ],
    headless: true,
    defaultViewport: null, // 让配置文件控制视口
  });

  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
})();

使用配置文件自定义窗口大小

# 仅覆盖窗口大小，其余保持来自配置文件
chrome --bot-profile="/profiles/win11-chrome-130.enc" \
       --bot-config-window=1440x900 \
       --bot-config-screen=1920x1080

验证

通过检查完整的设备信号范围来验证设备仿真：

const page = await context.newPage();
await page.goto('https://example.com');

const deviceCheck = await page.evaluate(() => ({
  // Screen
  screen: {
    width: screen.width,
    height: screen.height,
    availWidth: screen.availWidth,
    availHeight: screen.availHeight,
  },
  // Window
  window: {
    innerWidth: window.innerWidth,
    innerHeight: window.innerHeight,
    outerWidth: window.outerWidth,
    outerHeight: window.outerHeight,
    dpr: window.devicePixelRatio,
  },
  // Touch
  touch: {
    maxTouchPoints: navigator.maxTouchPoints,
    ontouchstart: 'ontouchstart' in window,
    pointerCoarse: matchMedia('(pointer: coarse)').matches,
    hoverNone: matchMedia('(hover: none)').matches,
  },
  // Hardware
  hardware: {
    deviceMemory: navigator.deviceMemory,
    hardwareConcurrency: navigator.hardwareConcurrency,
  },
}));

console.log('Device verification:', JSON.stringify(deviceCheck, null, 2));

最佳实践

• 在 Playwright 与 Puppeteer 中始终使用 defaultViewport: null。 让配置文件控制视口尺寸。框架视口设置会覆盖配置文件值，破坏一致性。
• 选择适合用例的设备配置文件。 普通自动化使用常见设备模型；移动测试使用主流手机模型。
• 不要将手动覆盖与配置文件混用。 让配置文件控制全设备身份。手动覆盖（如在移动配置文件上设置自定义视口）会带来信号不一致风险。
• 验证所有信号类别。 一并检查屏幕、触摸、硬件与 GPU 信号，而非单独检查某项。
• 使用 --bot-config-window 与 --bot-config-screen 做受控覆盖。 需要特定尺寸时，使用这些标志调整显示属性，同时保持其它信号一致。
• 根据用例匹配设备。 对电商测试使用消费手机配置文件；对企业测试使用典型办公显示器的桌面配置文件。

常见问题

BotBrowser 会生成真实的触摸事件吗？

会的。BotBrowser 在引擎级别启用触摸支持，因此 maxTouchPoints、ontouchstart 与 CSS 媒体查询都会正确报告。若需生成触摸序列（tap、swipe、pinch），请使用自动化框架的触摸输入 API（Playwright 的 page.touchscreen.tap() 等）。

在移动配置文件下如果在 Playwright 中设置了 viewport 会怎样？

通过 Playwright 或 Puppeteer 设置视口会覆盖配置文件的窗口尺寸，可能在 innerWidth/innerHeight（由框架设置）与 screen.width/screen.height（由配置文件设置）之间产生不一致。请使用 defaultViewport: null 避免此问题。

我可以在保持其它设备信号不变的情况下自定义屏幕尺寸吗？

可以。使用 --bot-config-window 与 --bot-config-screen 覆盖显示尺寸，同时保持配置文件中的触摸、内存、GPU 等信号。

devicePixelRatio 与截图如何配合？

截图的实际像素尺寸为 width * devicePixelRatio × height * devicePixelRatio。例如 412px 宽的移动视口且 DPR 为 2.625，会产生宽度为 1081 像素的截图。

平板配置文件是否支持触摸？

支持。平板配置文件通常包含触摸支持（通常 maxTouchPoints: 10）以及适合平板的屏幕尺寸与 DPR 值。

我可以在同一浏览器中为不同上下文使用不同设备配置文件吗？

设备特征在浏览器实例级别通过配置文件设置。相同浏览器内的不同上下文共享设备信号。若需不同设备身份，请为不同配置文件启动独立浏览器实例。

移动配置文件报告哪些 GPU 字符串？

移动配置文件报告源设备的 GPU，如 "Adreno (TM) 730"、"Mali-G710" 或 "Apple GPU" 等。

总结

BotBrowser 的设备仿真通过来自真实硬件的配置文件提供完整且一致的设备身份。所有设备信号（屏幕尺寸、触摸能力、GPU 字符串与设备内存）都来自同一源设备，保证内部一致性且无需手动配置。

相关阅读： Android Emulation、Screen and Window Fingerprinting、Cross-Platform Profiles。

title: "设备仿真：触摸事件、屏幕指标和移动身份" description: "BotBrowser 如何通过基于配置文件的配置提供完整的设备仿真，支持移动、平板和桌面身份。" date: "2026-01-28" locale: zh category: platform tags: ["device", "emulation", "touch", "mobile", "platform"] published: true

概述

BotBrowser 加载从真实硬件捕获的完整设备配置文件。加载移动配置文件后，所有设备信号一致更新：触摸 API、屏幕尺寸、设备像素比、内存和连接类型。

BotBrowser 控制的内容

触摸能力。 移动配置文件在引擎层面启用 navigator.maxTouchPoints、ontouchstart 以及 CSS 媒体查询 (pointer: coarse) 和 (hover: none)。

屏幕和视口。 配置文件携带来自真实设备的精确 screen.width、screen.height 和 devicePixelRatio 值。

设备内存和连接。 navigator.deviceMemory 和 navigator.connection 值匹配源设备类型。

桌面、移动和平板配置文件

桌面配置文件报告零触摸点、精细指针和大屏幕。移动配置文件呈现触摸支持、粗略指针和移动尺寸屏幕。平板配置文件介于两者之间。

Playwright 集成

const { chromium } = require('playwright-core');

const browser = await chromium.launch({
  executablePath: '/path/to/botbrowser/chrome',
  args: [
    '--bot-profile=/profiles/pixel7-chrome-122.enc',
  ],
  headless: true,
  defaultViewport: null, // 让配置文件控制视口
});

const page = await (await browser.newContext()).newPage();
const metrics = await page.evaluate(() => ({
  screenWidth: window.screen.width,
  screenHeight: window.screen.height,
  dpr: window.devicePixelRatio,
  touchPoints: navigator.maxTouchPoints,
}));
console.log('Device metrics:', metrics);

要点

• 设备配置文件从真实硬件捕获，确保完整一致性
• 触摸支持在引擎层面控制，而非通过 JavaScript polyfill
• 在 Playwright/Puppeteer 中使用 defaultViewport: null 让配置文件控制显示属性
• 所有信号保持内部一致，因为它们来自同一源设备

开始使用

1. 从 GitHub 下载 BotBrowser
2. 从配置文件仓库选择设备配置文件
3. 使用 --bot-profile 启动并验证设备指标