Как протестировать верстку на разные разрешения экрана

Что проверяют

Есть ли у вас система: как выбрать набор экранов, чем эмуляция отличается от реального устройства и что вообще искать. Следом часто спрашивают, как это автоматизировать и что писать в баг-репорте.

Как отвечать

• матрица: собирается из аналитики реальной аудитории и брейкпоинтов дизайна, а не из списка «все популярные телефоны». Типичный набор ширин: 360, 390, 768, 1024, 1280, 1440, 1920. Обязательно проверяются границы брейкпоинтов, 767 и 768, и промежуточные ширины при плавном растягивании окна;
• CSS-пиксели и плотность: вёрстка живёт в ширине вьюпорта, а не в физическом разрешении. Экран шириной 1080 физических пикселей при DPR 3 даёт вьюпорт 360 CSS-пикселей, и на нём видны мутные картинки без srcset;
• эмуляция: Device Mode в Chrome DevTools, Responsive Design Mode в Firefox и Safari. Быстро, но это тот же движок настольного браузера;
• реальные устройства: iOS Safari с адресной строкой, из-за которой 100vh выше видимой области (лечится dvh и svh), вырезы экрана и safe-area-inset, клавиатура поверх полей формы. Своих устройств мало, выручают облачные фермы вроде BrowserStack или LambdaTest;
• автоматизация: скриншотные тесты. В Playwright это проекты с devices['iPhone 13'] и сравнение через toHaveScreenshot(), для компонентов в Storybook есть Chromatic, отдельно живут BackstopJS и Percy.

Чек-лист на каждом размере: горизонтальный скролл, наложение и обрезка элементов, длинные слова и строки на другом языке, размер нажимаемых областей (ориентир около 44 на 44 точки), альбомная ориентация, масштаб 200%. По WCAG контент должен читаться без горизонтального скролла при ширине 320 CSS-пикселей.

Где спотыкаются

Проверяют только в эмуляторе DevTools. Он не воспроизводит движок Safari, системные шрифты, клавиатуру и настоящий тач.

Смотрят три фиксированных устройства и пропускают ширины между брейкпоинтами, где вёрстка ломается чаще всего.

Пишут баг «поехала вёрстка на телефоне» без ширины вьюпорта, DPR, браузера с версией и скриншота. Разработчик не может воспроизвести, и баг возвращается.