Как проверить отображение на разных разрешениях экрана?
Что проверяют
Понимаете ли вы, что дело не только в ширине окна, и знаете ли, чем проверять помимо перетаскивания рамки браузера.
Как отвечать
Начните с того, что задаёт картинку: ширина окна, плотность пикселей, ориентация, масштаб системы и размер шрифта, заданный пользователем. Проверять только ширину недостаточно.
Как проверять:
- точки переключения макета берутся из кода или у разработчика, и проверяются значения вокруг них, а не случайные размеры. Дефекты живут ровно на границах;
- инструменты разработчика: режим устройства с готовыми профилями и произвольным размером, эмуляция плотности пикселей и медленной сети;
- реальные устройства: эмулятор не покажет поведение клавиатуры, вырезов экрана, жестовой навигации и системного масштабирования;
- сетка размеров составляется по аналитике: какие устройства действительно используют посетители сайта, а не абстрактный список;
- автоматизация: скриншотные тесты на нескольких ширинах ловят регрессии дешевле, чем ручной обход.
Что смотреть на каждой ширине: не появилась ли горизонтальная прокрутка, помещаются ли длинные слова и суммы, не перекрывают ли липкие элементы содержимое, доступны ли кнопки под клавиатурой, читается ли текст без увеличения, работает ли масштаб системы, не ломается ли раскладка при увеличении шрифта до двухсот процентов.
Отдельно про доступность: увеличение шрифта и масштабирование страницы это требование, а не пожелание, и вёрстка на фиксированных высотах ломается именно там.
Где спотыкаются
Проверяют три популярные ширины и пропускают границы переключения макета.
Тестируют только в эмуляторе и не видят проблем с клавиатурой и вырезами экрана.
Не проверяют увеличение системного шрифта, из-за чего у части пользователей текст обрезается.