Отпечаток экрана и окна: свойства отображения

Экран и окно важны для приватности: страница может наблюдать условия отображения без запроса разрешения. Они помогают адаптировать интерфейс и могут дополнять отпечаток браузера. Разрешение, размер окна или соотношение пикселей описывают только то, что данный контекст сообщает сейчас. Это не доказательство личности, ОС, физического монитора или местоположения. Само местоположение регулируется отдельным разрешением, о нём рассказывает Разрешения геолокации и точность позиции в браузере.

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

Кратко

• screen.width описывает экран, который раскрывает браузер, а window.innerWidth описывает область макета, которую занимает документ; ни одно из значений само по себе не определяет монитор или окно.
• availWidth и availHeight уменьшаются, когда системный интерфейс, док или удалённый сеанс резервирует место, и величина этой разницы не называет систему, которая его резервирует.
• devicePixelRatio следует за масштабированием экрана и масштабом страницы, а visualViewport.scale следует за пальцевым масштабированием; оба могут меняться в одном сеансе без каких-либо изменений оборудования.
• В headful-сеансе на десктопе --bot-screen и --bot-window по умолчанию равны real; задайте обоим значение profile, чтобы применить загруженный профиль, или передайте явные значения WxH либо JSON.

Содержание

• Смотреть видео
• Экран и доступная область
• Окно, viewport и масштаб
• Приватность и адаптивный интерфейс
• Ограниченная проверка
• Возможность и пределы BotBrowser
• Практический итог

Смотреть видео

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

Экран и доступная область

Screen сообщает width, height, availWidth, availHeight, colorDepth и pixelDepth. Браузер сообщает в CSS-пикселях экран, на котором находится окно. Доступная область может исключать постоянный системный интерфейс. Это браузерные наблюдения, а не инвентарь оборудования. Несколько экранов, масштабирование, поворот, док-станция, удалённый сеанс и настройки доступности могут изменить значения. Разница доступной области не определяет ОС или пользователя.

CSS-пиксель не обязан быть физическим пикселем. Медиа-запросы описывают условия рендеринга, а не серийный номер монитора; о том, как такие возможности стилей используются для отслеживания, рассказывает CSS-фингерпринтинг: как стили отслеживают вас. colorDepth и pixelDepth не доказывают HDR, полный охват или калибровку.

Окно, viewport и масштаб

window.innerWidth и innerHeight описывают viewport макета, включая вертикальную полосу прокрутки. outerWidth и outerHeight описывают границу окна, которую раскрывает браузер. Связь зависит от интерфейса, полос, состояния окна и платформы. Визуальный viewport показывает видимую часть и может меняться из-за мобильного UI, клавиатуры или пальцевое масштабирование. visualViewport, когда он доступен, сообщает это пространство в CSS-пикселях.

Масштаб страницы и пальцевое масштабирование различны. Масштаб страницы может менять CSS-масштаб и devicePixelRatio; пальцевое масштабирование прежде всего меняет визуальный viewport. Перемещение окна между экранами с разным масштабом тоже может изменить ratio. Это текущие условия, не стабильная идентичность.

Приватность и адаптивный интерфейс

Комбинация экрана, области, viewport, масштаба и ratio может дополнять другие наблюдения, но не доказывает, кто использует браузер или какой хост дал каждое значение. Собирайте только данные, нужные для интерфейса или поддержки. Адаптивный макет должен использовать viewport макета, а не весь экран: разделённое окно может быть намного уже screen.width.

Отделяйте CSS-размер изображения от числа bitmap-пикселей. Более плотный ресурс может улучшить читаемость, но не доказывает модель дисплея. Сохраняйте reflow, масштаб и доступный вариант. Клавиатура или уменьшенный визуальный viewport требуют переместить элемент, а не собирать идентификатор.

Ограниченная проверка

Сравнивайте эквивалентные сценарии и фиксируйте headed/headless, viewport, масштаб и расположение экранов. Проверяйте resize, смену экрана, поворот или док, масштаб страницы, пальцевое масштабирование и мобильный UI. При отсутствии API оставляйте обычный путь. Результат должен описывать видимое поведение, неизвестное и действие, а не классифицировать человека.

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

Возможность и пределы BotBrowser

BotBrowser документирует профильные элементы управления данными экрана и окна, сообщаемыми страницам. Они могут поддерживать согласованность отображения в авторизованных проверках приватности и совместимости. Они не изменяют оборудование, системные настройки и перечисление вне процесса браузера. Реальный режим окна может отражать resize и несколько экранов. Профильные headless-значения не гарантируют совпадение с каждым headed-браузером. Проверяйте выбранные профиль и runtime.

См. соотношение пикселей, приватность между поверхностями и отпечаток разрешений.

Практический итог

Порядок разбора решает, значит ли что-то наблюдение дисплея. Сначала назовите поверхность, от которой зависит задача (Screen, viewport макета, визуальный viewport или devicePixelRatio), затем зафиксируйте режим браузера, состояние окна и уровень масштаба, при которых получено значение. Сравнение двух сеансов корректно только при совпадении этих условий.

Для работы над интерфейсом принимайте решения по макету на основе window.innerWidth, а временные элементы размещайте через visualViewport, сохраняя читаемость документа при отсутствии этого API. Считайте availWidth и availHeight ограничениями пространства, которое получает окно, а не описанием платформы.

В авторизованной проверке BotBrowser загрузите нужный профиль, задайте --bot-screen=profile и --bot-window=profile вместе в headful-сеансе и подтвердите сообщаемые значения на страницах сценария. Значение дисплея объясняет, что контекст браузера раскрыл в этот момент; оно не определяет хост, монитор или человека.

Источники

• BotBrowser: экран и окно
• W3C CSSOM View Module
• MDN: Screen
• MDN: Window
• MDN: Window.devicePixelRatio
• MDN: VisualViewport