Як користуватися
- Відкрийте сторінку. Дані зчитуються з браузера одразу.
- Змініть розмір вікна або поверніть пристрій, щоб побачити, як оновлюються розмір і орієнтація області перегляду.
- Скористайтеся кнопкою «Копіювати все», щоб додати дані до звіту про помилку або запиту до служби підтримки.
Як це працює
Браузери повідомляють розміри в пікселях CSS — одиницях, які вебсторінки використовують для компонування. На дисплеях із високою щільністю пікселів один піксель CSS відображається кількома фізичними пікселями: їхню кількість показує коефіцієнт пікселів пристрою (DPR). Телефон, який повідомляє роздільну здатність 390 × 844 за DPR 3, має екран приблизно на 1170 × 2532 пікселі пристрою. На комп’ютерах масштабування сторінки в браузері й масштабування дисплея в операційній системі змінюють і DPR, і розмір у пікселях CSS. Тому монітор із роздільною здатністю 2560 × 1440 за масштабування 125 % повідомляє 2048 × 1152.
Розмір екрана — це весь дисплей; доступна область не охоплює постійні панелі операційної системи, як-от панель завдань Windows або рядок меню macOS; область перегляду — це частина вікна браузера, де показано сторінку, без панелей інструментів, але зі смугою прокручування, якщо вона є. Саме на область перегляду реагують медіазапити CSS, як-от min-width: 768px, тож її розмір важливо перевіряти під час тестування адаптивного макета.
Кольорова схема та параметри зменшення руху надходять із тих самих медіафункцій CSS, які сайти використовують для адаптації до системних налаштувань. Назви брендів, платформа й мобільний пристрій отримуються з підказок клієнта User-Agent, які доступні лише в браузерах на основі Chromium. Деякі браузери навмисно округлюють або фіксують ці значення, щоб ускладнити цифрове відстеження, тому вони можуть не повністю відповідати вашому пристрою.
Приклади
Тестування адаптивного макета
Макет некоректно відображається на ноутбуці колеги. Він копіює параметри: область перегляду 1280 × 649, DPR 1,5. Установіть у панелі пристроїв браузера таку саму область перегляду, щоб відтворити проблему.
Вибір розміру зображень
Зображення товару відображається завширшки 400 пікселів CSS. На телефоні з DPR 3 для чіткого вигляду потрібно 1200 пікселів — так можна визначити, які розміри вказати в srcset.
Перевірка масштабування монітора
Монітор із роздільною здатністю 3840 × 2160 повідомляє 2560 × 1440 за DPR 1,5: отже, у Windows дисплей масштабується на 150 %.
Поширені запитання
Чому роздільна здатність екрана відрізняється від зазначеної в характеристиках монітора?
Браузери повідомляють розмір у пікселях CSS — фізичних пікселях, поділених на коефіцієнт масштабування. Помножте його на коефіцієнт пікселів пристрою, щоб приблизно визначити роздільну здатність екрана. Масштабування сторінки в браузері також змінює це значення.
Чим відрізняється розмір екрана від розміру області перегляду?
Розмір екрана — це весь дисплей. Область перегляду — лише ділянка у вікні браузера, де відображається сторінка. Тому вона менша й змінюється, коли ви змінюєте розмір вікна або відкриваєте інструменти розробника.
Чи використовуються ці дані для відстеження?
Ця сторінка не використовує ці дані для відстеження: вони показуються лише вам і ніде не зберігаються та не надсилаються. Вебсайти можуть зчитувати ті самі значення, тому деякі браузери округлюють їх, щоб ускладнити цифрове відстеження.
Чому на моєму ноутбуці показано підтримку сенсорного вводу?
Підтримка сенсорного вводу визначається за кількістю точок дотику, про які повідомляє браузер. Ноутбуки із сенсорним екраном повідомляють про них, навіть якщо ви переважно користуєтеся мишею. Деякі драйвери та конфігурації віддаленого робочого стола також можуть указувати на підтримку сенсорного вводу, хоча сенсорного екрана немає.
Конфіденційність
Усі значення зчитуються JavaScript у вашому браузері й показуються лише вам. Дані не зберігаються, не завантажуються на сервер і не включаються в аналітику; фіксується лише анонімна подія про відкриття та використання інструмента.