Сайт, который безупречно выглядит в браузере разработчика, вполне может ломаться у половины посетителей. Причина не в чьей-то небрежности: браузеры по-разному отрисовывают формы, по-разному поддерживают новые свойства стилей, по-разному ведут себя при появлении экранной клавиатуры. Разберём, где обычно расходится поведение, как это проверять без парка устройств и что чинить в первую очередь.
Почему расхождения неизбежны
Браузеры построены на разных движках отрисовки, и даже при общем стандарте детали реализации отличаются. Добавьте к этому разные версии: посетитель может сидеть на телефоне, который перестали обновлять три года назад. Плюс операционная система подставляет свои шрифты, свои элементы управления формами и свои правила поведения при прокрутке.
Полное совпадение картинки во всех средах — недостижимая и ненужная цель. Рабочая цель другая: во всех актуальных браузерах сайт должен быть полностью работоспособен, а различия в оформлении допустимы, если они не мешают выполнить действие.
Что проверять обязательно
| Среда | На что смотрим | Что обычно ломается |
|---|---|---|
| Chrome на компьютере | Базовая проверка вёрстки и сценариев | Здесь, как правило, всё в порядке — это среда разработки |
| Safari на iPhone | Формы, прокрутка, фиксированные элементы, видео | Больше всего расхождений: высота экрана, поведение клавиатуры, автозапуск видео |
| Chrome на Android | Клавиатура, фиксированная шапка, всплывающие блоки | Панель адреса при прокрутке меняет высоту области просмотра |
| Firefox | Отрисовка форм, шрифты, тени, сетки | Отличия в оформлении полей и в некоторых свойствах раскладки |
| Safari на компьютере | Шрифты, сглаживание, поддержка новых свойств | Отставание в поддержке отдельных возможностей |
| Старый ноутбук или бюджетный телефон | Скорость, тяжёлые эффекты, анимации | Заметные задержки при прокрутке и на анимациях |
| Режим уменьшенного движения и увеличенный шрифт | Доступность | Текст обрезается, анимации мешают |
Типичные проблемы
Список повторяется от проекта к проекту, поэтому мы держим его как чек-лист.
- Фиксированная шапка «прыгает» на телефоне. При появлении экранной клавиатуры или при скрытии панели адреса меняется высота области просмотра, и элементы, привязанные к высоте экрана, смещаются.
- Поля ввода выглядят по-разному. У каждой платформы свои скругления, тени и внутренние отступы по умолчанию. Без явного сброса стилей форма в одном браузере аккуратная, в другом — с непонятной подложкой.
- Новое свойство стилей поддержано не везде. Если раскладка держится на одном современном приёме без запасного варианта, в старом браузере она рассыпается.
- Видео не воспроизводится автоматически. На мобильных автозапуск разрешён только без звука и при определённых атрибутах, иначе вместо фонового ролика посетитель видит пустоту.
- Подставляется системный шрифт. Если формат файла шрифта не поддерживается или файл не загрузился, вёрстка едет: другая ширина букв меняет длину строк и высоту блоков.
- Прокрутка внутри блока не работает. Инерционная прокрутка на мобильных требует внимания к свойствам контейнера.
- Дата и время в полях. Встроенные элементы выбора даты выглядят и работают по-разному, в некоторых средах поле превращается в обычный текст.
- Горизонтальная полоса прокрутки. Один блок шире экрана — и вся страница сдвигается вбок на телефоне.
Как уменьшить расхождения на этапе разработки
- Использовать проверенные свойства как основу, а новые добавлять как улучшение с запасным вариантом.
- Явно сбрасывать оформление форм и кнопок, а не полагаться на умолчания браузера.
- Не завязывать всю раскладку на один экзотический приём: если он не поддержан, страница должна оставаться читаемой.
- Задавать несколько форматов шрифта и разумный запасной набор системных гарнитур.
- Проверять размеры единицами, устойчивыми к смене высоты панели браузера, а не только высотой экрана.
- Ограничивать анимации и учитывать системную настройку уменьшения движения.
- Тестировать на реальных устройствах, а не только в режиме эмуляции: эмулятор не воспроизводит поведение клавиатуры и производительность.
Какие браузеры вообще поддерживать
Поддерживать всё подряд не нужно — это дорого и никому не помогает. Решение принимается по данным аналитики конкретного сайта: обычно 90–95 процентов посещений приходится на несколько свежих версий двух-трёх браузеров. Всё остальное — длинный хвост, ради которого не стоит усложнять код.
Разумная формулировка требования выглядит так: на актуальных версиях популярных браузеров сайт выглядит и работает как задумано; на устаревших — остаётся работоспособным, пусть и без декоративных эффектов; на совсем старых версиях доступны основное содержание и контакты. Такую формулировку полезно записать в техническое задание, чтобы потом не спорить о том, входила ли поддержка конкретной версии в объём работ.
Когда проверять
Проверка нужна не постоянно, а в определённые моменты:
- Перед запуском сайта или крупного раздела.
- После правок шаблона, особенно шапки, подвала и форм.
- После обновления библиотек и плагинов: чужой код часто меняет поведение форм и прокрутки.
- После подключения нового виджета — чата, карты, формы стороннего сервиса.
- Раз в квартал выборочно, потому что браузеры обновляются сами и что-то может измениться без вашего участия.
Отдельно стоит следить за письмами от посетителей вида «у меня не отправляется форма». Такие сообщения обычно единичны и теряются, а за ними нередко стоит воспроизводимая проблема в конкретной среде. Полезно уточнять у человека браузер и устройство — на это уходит одно письмо, а поиск ускоряется в разы.
Что делать, если проблема уже у посетителей
- Собрать данные: устройство, браузер, версия, что именно не работает, воспроизводится ли постоянно.
- Проверить, отличается ли поведение в приватном режиме и с отключёнными расширениями — часть жалоб связана с блокировщиками.
- Посмотреть журнал ошибок в консоли браузера на проблемном устройстве: чаще всего виноват один скрипт.
- Отключить сторонние виджеты по одному и проверить, исчезает ли проблема.
- Исправить и обязательно проверить в остальных средах, чтобы правка не сломала то, что работало.
Нужна помощь
Ловить такие расхождения удобнее в рамках регулярного сопровождения: тогда проверка идёт после каждого обновления, а не когда клиент сообщает о неработающей форме. Мы возьмём это на себя вместе с обновлениями и мониторингом — настроим техническую поддержку сайта с проверкой на реальных устройствах.
Проверить гипотезы дешевле на прототипе: UX/UI-проектирование экономит недели разработки.
