Руководство по эмуляции устройств: мобильные, планшетные и настольные профили

Введение

Браузер раскрывает своё устройство через десятки сигналов: размеры экрана, соотношение пикселей устройства, сенсорные возможности, объём памяти устройства, характеристики GPU, модальности ввода и многое другое. Эти сигналы формируют целостную картину физического устройства, на котором работает браузер. Pixel 7 имеет конкретные размеры экрана, конкретный DPR, конкретное число точек касания, конкретный GPU и конкретный объём памяти. Когда эти сигналы согласованы, браузер выглядит работающим на реальном оборудовании. Когда они конфликтуют, несогласованность видна.

BotBrowser загружает полные профили устройств, захваченные с реального оборудования. Когда мобильный профиль загружается на настольной системе, все сигналы устройства обновляются согласованно, потому что все они берутся из одного исходного устройства. Никакого смешивания, никакой ручной настройки отдельных свойств и никакого риска конфликтов сигналов.

Влияние на конфиденциальность: почему сигналы устройства важны

Эмуляция устройств важна по нескольким причинам, помимо простого представления мобильным или настольным браузером.

Системы отслеживания используют сигналы устройства как часть процесса фингерпринтинга. Комбинация разрешения экрана, DPR, поддержки сенсорного ввода, памяти устройства, рендерера GPU и числа ядер CPU создаёт отпечаток на уровне устройства, который сохраняется между сессиями. Контроль этих сигналов необходим для поддержания согласованных браузерных идентичностей и для изучения того, как системы отслеживания используют характеристики устройства.

Платформы электронной коммерции и контентные платформы предоставляют разный опыт в зависимости от обнаруженного устройства. Мобильные пользователи могут видеть разные цены, разные макеты и разный выбор контента. Исследователям конфиденциальности нужна точная эмуляция устройств для надёжного изучения этих практик.

Для управления несколькими аккаунтами разнообразие устройств важно. Когда каждая идентичность представляется одной и той же моделью устройства с одинаковыми размерами экрана, это подозрительно. Использование разнообразных профилей устройств, сочетание настольных и мобильных, разных размеров экрана и разных значений DPR, создаёт естественную вариацию.

Техническая справка

Сигналы устройства в браузере

Браузер раскрывает характеристики устройства через множество API:

Размеры экрана: screen.width, screen.height, screen.availWidth, screen.availHeight сообщают физический размер дисплея. window.innerWidth и window.innerHeight сообщают viewport. window.outerWidth и window.outerHeight включают элементы браузера.

Соотношение пикселей устройства: window.devicePixelRatio сообщает соотношение между CSS-пикселями и физическими пикселями. Настольные дисплеи обычно имеют DPR 1.0 или 1.25. Мобильные устройства - от 2.0 до 3.5 и выше. Retina-дисплеи MacBook сообщают 2.0.

Сенсорные возможности: navigator.maxTouchPoints сообщает максимальное число одновременных точек касания (0 для настольных, 5-10 для мобильных). Доступность обработчика события ontouchstart на объекте window указывает на поддержку касания. CSS-медиа-запросы (pointer: coarse) и (hover: none) различают сенсорный и указательный ввод.

Память устройства: navigator.deviceMemory сообщает приблизительный объём ОЗУ в ГБ. Мобильные устройства обычно сообщают 4-8 ГБ, настольные - 8-16 ГБ.

Аппаратная параллельность: navigator.hardwareConcurrency сообщает число доступных ядер CPU. Мобильные устройства обычно сообщают 4-8, настольные - 4-16 и более.

Информация о подключении: navigator.connection предоставляет тип сети, эффективный тип, скорость нисходящего канала и RTT. Мобильные устройства часто сообщают другие сетевые характеристики, чем настольные системы.

GPU: строка рендерера WebGL идентифицирует графическое оборудование. Мобильные GPU (Adreno, Mali, PowerVR, Apple GPU) полностью отличаются от настольных GPU (NVIDIA GeForce, AMD Radeon, Intel UHD).

Требования к согласованности сигналов

Эти сигналы должны быть внутренне согласованы. Браузер, сообщающий maxTouchPoints: 10, но (pointer: fine) и (hover: hover), содержит противоречие. Браузер с шириной экрана 412px, но 16 ГБ памяти устройства и GPU NVIDIA сочетает мобильные размеры экрана с настольными характеристиками оборудования. Эти несогласованности ясно показывают, что отдельные сигналы были подменены, а не получены от реального устройства.

Распространённые подходы и их ограничения

Эмуляция устройств в Chrome DevTools

Chrome DevTools Protocol предоставляет эмуляцию устройств через Emulation.setDeviceMetricsOverride. Это задаёт размеры viewport, DPR и поддержку сенсорного ввода. Playwright и Puppeteer предоставляют доступ к этому через свои API эмуляции устройств.

Ограничения:

• Не изменяет navigator.platform или данные User-Agent за пределами явно заданных
• Строки рендерера WebGL по-прежнему сообщают настольный GPU
• navigator.deviceMemory и navigator.hardwareConcurrency остаются на настольных значениях
• Эмуляция касания поверхностная, не на уровне движка
• Доступность шрифтов остаётся специфичной для настольной платформы
• Медиа-запросы могут не полностью совпадать с эмулируемым устройством

Ручные переопределения свойств

Вы можете переопределить отдельные свойства через JavaScript-инъекцию:

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

Это изменяет видимые JavaScript-значения, но не влияет на реальное поведение браузера. CSS-медиа-запросы, поведение конвейера рендеринга и HTTP-заголовки не затрагиваются JavaScript-переопределениями свойств.

Подходы только на уровне viewport

Установка мобильного размера viewport (например, 412x915) через фреймворк автоматизации меняет раскладку, но не изменяет ни один другой сигнал устройства. Браузер по-прежнему сообщает настольные размеры экрана, настольный DPR, ноль точек касания и настольную информацию о GPU.

Подход BotBrowser

Профили BotBrowser захвачены с реальных устройств, что означает, что все сигналы устройства берутся с одного и того же физического оборудования. При загрузке на любую систему эти сигналы применяются вместе на уровне движка, обеспечивая полную внутреннюю согласованность.

Идентичность устройства на основе профиля

Каждый профиль содержит снимок характеристик устройства:

• Размеры экрана (ширина, высота, доступная ширина, доступная высота)
• Соотношение пикселей устройства
• Сенсорные возможности (maxTouchPoints, поддержка сенсорных событий)
• Память устройства
• Аппаратная параллельность
• Строки рендерера и производителя GPU
• Свойства navigator, специфичные для платформы
• Размеры обрамления окна (для вычисления внешних размеров)

Все эти сигналы применяются как единое целое, а не по отдельности. Это исключает риск конфликтов сигналов.

Поддержка касания на уровне движка

При загрузке мобильного профиля поддержка касания включается на уровне движка Chromium, а не через JavaScript-инъекцию:

• navigator.maxTouchPoints возвращает реальное значение устройства
• ontouchstart нативно доступен на объекте window
• CSS-медиа-запросы (pointer: coarse) и (hover: none) вычисляются корректно в движке стилей
• Конструкторы и свойства сенсорных событий ведут себя точно так же, как на реальном устройстве
• API InputDeviceCapabilities корректно сообщает о поддержке касания

Настольные, мобильные и планшетные профили

BotBrowser поддерживает профили всех категорий устройств:

Настольные профили: большие экраны (1920x1080, 2560x1440), DPR 1.0-2.0, ноль точек касания, точный указатель, настольный GPU, 8-16 ГБ памяти.

Мобильные профили: маленькие экраны (412x915, 390x844), DPR 2.0-3.5, поддержка касания с 5-10 точками, грубый указатель, мобильный GPU, 4-8 ГБ памяти.

Планшетные профили: средние экраны (1024x1366, 820x1180), DPR 2.0, поддержка касания, иногда и грубый, и точный указатель, мобильный или интегрированный GPU.

Конфигурация окна и экрана

BotBrowser обеспечивает детальный контроль над свойствами окна и экрана через CLI-флаги:

# Use the profile's captured dimensions (default for headless)
--bot-config-window=profile
--bot-config-screen=profile

# Specific dimensions
--bot-config-window=1920x1080
--bot-config-screen=2560x1440

# Full JSON customization
--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,
  });

  // Important: do not set viewport - let the profile control it
  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, // Let the profile control viewport
  });

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

Пользовательский размер окна с профилем

# Override just the window size, keep everything else from the profile
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));

Лучшие практики

• Всегда используйте defaultViewport: null в Playwright и Puppeteer. Это позволяет профилю контролировать размеры viewport. Настройки viewport фреймворка переопределяют значения профиля, нарушая согласованность.
• Выбирайте профили устройств, соответствующие вашему сценарию. Для общей веб-автоматизации используйте распространённые модели устройств. Для мобильного тестирования используйте профили популярных моделей телефонов.
• Не смешивайте ручные переопределения с профилями. Позвольте профилю контролировать полную идентичность устройства. Ручные переопределения (например, установка пользовательского viewport на мобильном профиле) рискуют создать несогласованности сигналов.
• Проверяйте все категории сигналов. Проверяйте сигналы экрана, касания, оборудования и GPU вместе, а не по отдельности.
• Используйте --bot-config-window и --bot-config-screen для контролируемых переопределений. Когда нужны конкретные размеры, эти флаги корректируют свойства дисплея, сохраняя все остальные сигналы согласованными.
• Согласуйте устройство со сценарием использования. Для тестирования электронной коммерции используйте профили потребительских телефонов. Для корпоративного тестирования используйте настольные профили с типичными разрешениями офисных мониторов.

Часто задаваемые вопросы

Генерирует ли BotBrowser реальные сенсорные события?

BotBrowser включает поддержку касания на уровне движка, что означает, что maxTouchPoints, ontouchstart и CSS-медиа-запросы все сообщают корректно. Для генерации последовательностей сенсорных событий (нажатие, свайп, щипок) используйте API сенсорного ввода вашего фреймворка автоматизации. Playwright предоставляет page.touchscreen.tap(), Puppeteer предоставляет аналогичные методы.

Что происходит, если задать viewport в Playwright с мобильным профилем?

Установка viewport через Playwright или Puppeteer переопределяет размеры окна профиля. Это может создать несогласованности между innerWidth/innerHeight (заданные фреймворком) и screen.width/screen.height (заданные профилем). Используйте defaultViewport: null, чтобы этого не допустить.

Можно ли настроить размеры экрана, сохранив другие сигналы устройства?

Да. Используйте --bot-config-window и --bot-config-screen для переопределения размеров дисплея, сохраняя сенсорные, память, GPU и другие сигналы из профиля.

Как работает devicePixelRatio со скриншотами?

При создании скриншотов реальные пиксельные размеры изображения составляют ширина * devicePixelRatio на высота * devicePixelRatio. Мобильный viewport шириной 412px с DPR 2.625 даёт скриншоты шириной 1081 пиксель.

Есть ли поддержка касания у планшетных профилей?

Да. Планшетные профили включают поддержку касания (обычно maxTouchPoints: 10) вместе с размерами экрана и значениями DPR, соответствующими планшету.

Можно ли использовать разные профили устройств для разных контекстов в одном браузере?

Характеристики устройства задаются на уровне экземпляра браузера через профиль. Разные контексты в одном браузере разделяют одни и те же сигналы устройства. Для разных идентичностей устройств запускайте отдельные экземпляры браузера с разными профилями.

Какие строки GPU сообщают мобильные профили?

Мобильные профили сообщают GPU исходного устройства. Типичные примеры: «Adreno (TM) 730» для устройств на базе Qualcomm, «Mali-G710» для устройств Samsung Exynos и «Apple GPU» для iPhone.

Итоги

Эмуляция устройств в BotBrowser обеспечивает полные, согласованные идентичности устройств через профили, захваченные с реального оборудования. Все сигналы устройства, от размеров экрана и сенсорных возможностей до строк GPU и памяти устройства, берутся с одного исходного устройства, обеспечивая внутреннюю согласованность без ручной настройки.

По связанным темам смотрите Эмуляция Android для мобильной эмуляции, Фингерпринтинг экрана и окна для деталей о сигналах экрана и Кроссплатформенные профили для запуска профилей между операционными системами.