Сайт не работает на iPhone в Safari: частые причины и проверка
Если сайт ломается только на iPhone, причина почти всегда в различиях движка WebKit, на котором работает Safari и все браузеры на iOS. Частые случаи: форма не отправляется из-за неподдерживаемой функции JavaScript, кнопка под фиксированной панелью не нажимается, высота экрана считается неправильно, видео не запускается без отключённого звука, поле даты выглядит иначе. Первое, что нужно сделать, — посмотреть в Метрике, есть ли заявки с iOS: если на iOS их почти нет при заметной доле посетителей, проблема реальная и стоит денег.
Почему iPhone — особый случай
На iPhone все браузеры — Chrome, Яндекс Браузер, Firefox — используют движок Safari. Поэтому «на iPhone в Chrome тоже не работает» не значит, что проблема в коде вообще: это та же особенность WebKit. При этом многие разработчики проверяют сайт на компьютере и Android, а до iPhone руки не доходят.
Частые причины
| Симптом | Частая причина | Что сделать |
|---|---|---|
| Форма не отправляется | Используется функция JavaScript, которой нет в старых версиях Safari | Проверить консоль, добавить совместимый код |
| Кнопка не нажимается | Перекрыта прозрачным элементом или фиксированной панелью | Проверить слои, отступы от нижней панели |
| Нижняя кнопка уходит под панель браузера | Высота 100vh считается с учётом скрытой панели | Использовать единицы dvh или svh и безопасные отступы |
| Страница сама увеличивается при вводе | Шрифт в поле меньше 16 px | Шрифт полей не меньше 16 px |
| Видео не запускается | Автозапуск разрешён только без звука | Атрибуты muted и playsinline |
| Поле даты выглядит странно | Своё оформление системного поля | Проверить стили поля или использовать свой выбор даты |
| Не работает вход или корзина в приватном режиме | Ограничения хранилища и cookie | Не полагаться только на localStorage |
| Фон или анимация дёргаются | Фиксированный фон, тяжёлые эффекты | Упростить эффекты на мобильных |
| Не открывается ссылка в приложение | Неправильный формат ссылки | Проверить схемы ссылок |
Как проверить без iPhone
- Метрика. Отчёт по устройствам и операционным системам: доля посетителей iOS, конверсия в заявку для iOS и Android. Большой разрыв — признак проблемы.
- Вебвизор. Записи визитов с iPhone покажут, где человек пытался нажать и что не сработало.
- Сервисы тестирования на реальных устройствах — облачные фермы устройств с iPhone разных версий.
- Safari на Mac с режимом адаптивного дизайна — показывает многие проблемы вёрстки, но не все особенности iOS.
- Знакомые с iPhone — быстрая проверка главного сценария: заявка, корзина, оплата.
Как найти точную причину
Разработчику нужен iPhone, подключённый к Mac, и инструменты разработчика Safari (документация Apple). Они показывают ошибки JavaScript и позволяют проверить элементы прямо на телефоне. Без этого поиск превращается в гадание.
Что попросить у того, кто нашёл проблему:
- модель iPhone и версию iOS (Настройки → Основные → Об этом устройстве);
- в каком браузере;
- точные шаги и скриншот или запись экрана;
- обычный или приватный режим.
Что проверять после исправлений
- Форма заявки: отправка, сообщение после отправки, заявка в CRM.
- Корзина и оформление заказа до оплаты.
- Меню, раскрывающиеся блоки, модальные окна: открываются и закрываются.
- Фиксированные кнопки внизу экрана не перекрываются панелью браузера.
- Ввод в поля без увеличения страницы.
- Видео на первом экране.
Оплата и Apple Pay
Отдельная история — оплата на iPhone. Платёжные страницы банков и сервисов обычно проверены на iOS, но проблемы возникают на стыке: сайт открывает оплату в новом окне, а Safari блокирует всплывающие окна; после оплаты банк возвращает человека на сайт, а корзина потеряна, потому что сессия хранилась в стороннем cookie, который Safari блокирует. Проверьте весь путь до возврата на сайт после оплаты именно на iPhone и в приватном режиме. Если оплата открывается в новом окне, лучше сделать переход в том же окне или встроенную форму оплаты.
Почта и ссылки из писем
Ссылки из писем и мессенджеров на iPhone часто открываются во встроенном браузере приложения — почты, Telegram, ВКонтакте. В нём могут не работать вход через сторонние сервисы, оплата или сохранение корзины. Если клиенты приходят на сайт в основном из рассылок и мессенджеров, проверьте главный сценарий и во встроенных браузерах.
Как не допустить в будущем
- Включите iPhone в обязательный список устройств для приёмки.
- Используйте сборку кода, которая автоматически приводит его к совместимости с нужными версиями браузеров.
- Проверяйте новые функции CSS и JavaScript на поддержку в Safari до использования.
- Настройте сбор ошибок JavaScript с сайта: такие сервисы показывают ошибки, которые возникают у реальных посетителей, с указанием браузера.
- Раз в месяц сравнивайте конверсию по iOS и Android.
Сколько стоит
Поиск и исправление одной проблемы на iPhone обычно занимает 1–4 часа, если у разработчика есть устройство. Комплексная проверка сайта на iOS и Android с исправлением найденного — 1–3 дня. Это одна из самых быстро окупаемых доработок: доля iPhone среди посетителей коммерческих сайтов в России часто составляет треть и больше, и именно они нередко приносят самые дорогие заказы.
Материалы для проверки
Если нужна реализация
Состав работ зависит от текущего проекта и подтверждённой причины. Можно обсудить диагностику или разработку подходящего решения.
Вопросы и ответы
Почему в Chrome на iPhone тоже не работает?
На iOS все браузеры используют движок Safari. Поэтому проблема одинакова во всех браузерах на iPhone и iPad.
Как узнать, сколько у меня посетителей с iPhone?
В Яндекс Метрике в отчёте по технологиям: операционные системы и устройства. Там же видна конверсия по каждой группе, если настроены цели.
Нужно ли поддерживать старые iPhone?
Зависит от аудитории. Посмотрите версии iOS в Метрике. Если доля старых версий заметная, их стоит поддерживать хотя бы для главных сценариев.
Почему страница увеличивается, когда я нажимаю на поле ввода?
Safari увеличивает страницу, если размер шрифта в поле меньше 16 пикселей. Исправляется стилями поля.
Можно ли проверить сайт на iPhone без iPhone?
Частично — в Safari на Mac и через облачные сервисы с реальными устройствами. Для точной отладки нужен телефон с подключением к инструментам разработчика.
Сколько стоит исправить проблему на iPhone?
Обычно 1–4 часа работы на одну проблему. Комплексная проверка и исправление на мобильных устройствах — 1–3 дня.