Кроссбраузерность: как проверить, что сайт работает у всех
Сайт, который прекрасно выглядит на макбуке разработчика, может ломаться на бюджетном Android с браузером трёхлетней давности. А это заметная доля вашей аудитории.
Почему браузеры показывают по-разному
Браузеры используют разные движки, поддерживают новые возможности CSS и JavaScript в разное время и по-разному обрабатывают ошибки. То, что один движок «прощает», другой рендерит криво или не рендерит вовсе.
Отдельная история — Safari на iPhone: он регулярно отстаёт от Chrome по поддержке свежих возможностей и по-своему ведёт себя с высотой экрана, полями форм и видео. Большая часть жалоб «у меня всё съехало» приходит именно оттуда.
Что реально проверять
Начните не с догадок, а с данных: в Google Analytics видно, какими браузерами, устройствами и разрешениями пользуется именно ваша аудитория. Проверять нужно то, чем пользуются люди, а не абстрактный список.
Практический минимум для Узбекистана: свежий Chrome на Android, Safari на iPhone нескольких поколений, Chrome и один альтернативный браузер на десктопе, встроенный браузер Telegram — по ссылкам из мессенджера заходит существенная часть трафика, и его окно ведёт себя не как обычная вкладка.
Как тестировать без бюджета
Первый уровень — режим устройств в инструментах разработчика: ловит проблемы вёрстки и адаптива, но не движковые различия. Второй — реальные телефоны сотрудников: пять разных устройств в офисе закрывают большую часть сценариев.
Третий — облачные сервисы с настоящими устройствами, когда нужно проверить конкретную версию. Обязательно тестируйте не только внешний вид, но и сценарии: отправку формы, оплату, работу фильтров и загрузку файлов.
Что ломается чаще всего
Горизонтальная прокрутка из-за элемента шире экрана, поля формы, при фокусе на которые в iOS съезжает вёрстка, кастомные выпадающие списки, некликабельные из-за наложения элементы, шрифты и иконки, не загрузившиеся из-за блокировки внешнего ресурса.
Отдельный класс проблем — видео с автозапуском: правила автовоспроизведения различаются между браузерами, и там, где на десктопе крутится фон, на телефоне остаётся чёрный прямоугольник. Всегда задавайте постер-кадр как запасной вариант.