Как в JavaScript получить разрешение экрана (width/height) и глубину цвета (colorDepth) пользователя для аналитики?

Для получения разрешения экрана и глубины цвета пользователя в JavaScript используется встроенный объект `screen`, который доступен в любом браузере без дополнительных библиотек и разрешений.

## Основные свойства объекта screen

— `screen.width` — полная ширина экрана в пикселях (например, 1920)
— `screen.height` — полная высота экрана в пикселях (например, 1080)
— `screen.availWidth` — доступная ширина (без панелей задач и системных элементов)
— `screen.availHeight` — доступная высота (без панелей задач)
— `screen.colorDepth` — глубина цвета в битах (обычно 24 или 32)
— `screen.pixelDepth` — аналог colorDepth, поддерживается большинством браузеров

## Пример кода

javascript
const screenData = {
width: screen.width,
height: screen.height,
availWidth: screen.availWidth,
availHeight: screen.availHeight,
colorDepth: screen.colorDepth,
pixelDepth: screen.pixelDepth,
devicePixelRatio: window.devicePixelRatio || 1
};

console.log(screenData);

## Формирование строки CSV

Для аналитики удобно сохранять данные в CSV-формат. Вот как сформировать одну строку:

javascript
const timestamp = new Date().toISOString();
const csvRow = [
timestamp,
screen.width,
screen.height,
screen.availWidth,
screen.availHeight,
screen.colorDepth,
screen.pixelDepth,
window.devicePixelRatio || 1
].join(‘,’);

console.log(csvRow);
// Пример вывода:
// 2024-06-01T12:00:00.000Z,1920,1080,1920,1040,24,24,1

Заголовок CSV-файла (header row) для этих данных:

timestamp,screen_width,screen_height,avail_width,avail_height,color_depth,pixel_depth,device_pixel_ratio

## Важные нюансы

1. **devicePixelRatio** — важный параметр для Retina-дисплеев. На MacBook с Retina он равен 2, что означает удвоенное физическое разрешение.
2. **Значения не изменяются** при изменении размера окна браузера — `screen` отражает физические характеристики монитора, а не окна.
3. **Для размера окна** используйте `window.innerWidth` и `window.innerHeight`.
4. **Конфиденциальность** — некоторые браузеры (Firefox в режиме приватности) могут возвращать округлённые значения для защиты от fingerprinting.
5. **colorDepth** сегодня почти всегда равен 24 (True Color), но фиксировать его всё равно полезно для полноты аналитики.

## Отправка данных на сервер

javascript
fetch(‘/analytics’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(screenData)
});

Таким образом, объект `screen` предоставляет всё необходимое для сбора данных о дисплее пользователя в целях веб-аналитики.