Обычно сайт выглядит на телефоне иначе по одной из трёх причин: вёрстка подстраивается под узкий экран (это ожидаемо), телефону отдаётся другая версия страницы (кеш, определение устройства или плагины) или браузер и настройки телефона отрисовывают её по-своему (движок Safari, тёмная тема, масштабирование шрифта). Сначала разберитесь, с какой из трёх ситуаций вы имеете дело, потому что исправления у них совершенно разные.
Сначала воспроизведите проблему на компьютере
Откройте тот же URL в мобильном виде на компьютере: в режиме устройства Chrome DevTools или в расширении вроде Mobile View Extension, которое перезагружает страницу с мобильным user agent и размером экрана телефона.
- В мобильном виде тоже выглядит неправильно? Это проблема вёрстки или контента. Начните с причин 1–4.
- В мобильном виде всё правильно, а на телефоне нет? Это проблема доставки или браузера. Начните с причин 5–11.
Причины в вёрстке и контенте
1. Мета-тег viewport отсутствует или задан неверно
Без <meta name="viewport" content="width=device-width, initial-scale=1"> телефоны отрисовывают страницу как десктопную шириной около 980 px и уменьшают её, поэтому всё выглядит крошечным. При неверном значении, например фиксированном width=1024, страница масштабируется странно. См. статью про мета-тег viewport.
2. Что-то шире экрана
Один элемент с фиксированной шириной (таблица, встраиваемый блок, длинный URL, изображение без max-width: 100%) заставляет всю страницу прокручиваться вбок, а некоторые браузеры уменьшают масштаб, чтобы его вместить. Найдите его в DevTools, проверив, у каких элементов scrollWidth больше ширины области просмотра.
3. Брейкпоинты переключают раскладку на неожиданной ширине
Телефон в горизонтальной ориентации может оказаться шире, чем вы думаете, а планшет — попасть на десктопную сторону брейкпоинта 768 px. Сверьте фактическую ширину устройства по таблице разрешений экранов iPhone и пересмотрите свои брейкпоинты.
4. Контент скрыт или переставлен на мобильных
Конструкторы страниц и CSS часто скрывают секции через display: none на маленькой ширине или меняют порядок колонок. Это сознательное решение, но о нём легко забыть. Проверьте настройки видимости только для мобильных.
Причины в доставке: телефон получает другую страницу
5. Кеш отдаёт старую версию
Браузер телефона может держать старый CSS, а CDN или плагин кеширования — хранить отдельный мобильный кеш, который не очистили. Очистите кеш сайта и CDN, затем перезагрузите страницу на телефоне в приватной вкладке.
6. Определение устройства отдаёт другой шаблон
Некоторые темы, плагины и серверы проверяют user agent и отдают телефонам другой HTML. Окно десктопного браузера, даже узкое, эту версию никогда не увидит. Мобильный вид, который отправляет настоящий мобильный user agent, увидит. Как работают user agent, объяснено в статье что делает user agent switcher.
7. Реклама, A/B-тесты и персонализация
Рекламные блоки, эксперименты и контент по местоположению могут различаться в зависимости от устройства или визита. Проверяйте без авторизации, в приватной вкладке и с отключёнными экспериментами, если ваш инструмент это позволяет.
Причины в браузере и настройках: телефон отрисовывает иначе
8. Движок Safari ведёт себя по-другому
Все браузеры на iPhone в основном используют WebKit. Различия проявляются в элементах форм, position: sticky внутри контейнеров с overflow, 100vh при сворачивающейся адресной строке (используйте 100dvh) и новых возможностях CSS. Проверяйте в Safari на iOS через Xcode Simulator или на реальном устройстве; см. статью про проверку сайта на iPhone.
9. Браузер применяет тёмную тему
Некоторые браузеры, например Samsung Internet, могут принудительно затемнять страницы, которые не объявляют свою цветовую схему. Логотипы с прозрачным фоном и жёстко заданные цвета становятся нечитаемыми. Объявите color-scheme и сделайте тёмную тему через prefers-color-scheme или явно задайте светлые цвета.
10. Отличаются шрифты и размер текста
Если веб-шрифт не загрузился, телефон подставляет системный шрифт с другой шириной символов, и текст переносится иначе. Пользователи могут увеличить текст в настройках браузера или специальных возможностях системы, а мобильные браузеры иногда сами увеличивают текст в горизонтальной ориентации. Используйте относительные единицы, разрешайте тексту переноситься и задайте text-size-adjust: 100%, если автоматическое увеличение мешает.
11. Функции браузера меняют страницу
Блокировщики контента, режимы экономии трафика, режим чтения и перевод могут менять то, что видит посетитель. Если странную вёрстку видит один человек, спросите, каким браузером и какими функциями он пользуется, прежде чем что-то переделывать.
Быстрая таблица диагностики
| Симптом | Наиболее вероятная причина |
|---|---|
| Всё мелкое, приходится увеличивать | Нет тега viewport (1) |
| Страница прокручивается вбок | Элемент шире экрана (2) |
| В превью всё хорошо, на телефоне старый дизайн | Кеш (5) |
| На телефоне совсем другой дизайн | Определение устройства или мобильная тема (6) |
| Ломается только на iPhone | Различия Safari/WebKit (8) |
| Цвета инвертированы или пропал логотип | Принудительная тёмная тема (9) |
| Текст переносится иначе, кнопки вылезают | Запасной шрифт или масштабирование текста (10) |
Как не допустить этого в следующий раз
Проверяйте новые страницы в мобильном виде во время разработки, а не после запуска, и держите короткий чек-лист для релизов. Такой есть в чек-листе тестирования мобильной версии сайта. Исправления для WordPress описаны в статье как сделать мобильную версию сайта на WordPress.
Частые вопросы
Почему сайт на телефоне выглядит иначе, чем в мобильном виде Chrome?
Мобильный вид Chrome использует движок Chrome и закешированные файлы вашего компьютера. Телефон может использовать движок Safari, другие закешированные файлы или мобильный кеш CDN, а также применять тёмную тему или масштабирование текста.
Почему сайт на WordPress выглядит на мобильных иначе?
Самые частые причины: настройки конструктора страниц, применённые только к десктопному размеру, плагин кеширования, отдающий старый мобильный кеш, и темы или плагины, которые отдают отдельную мобильную вёрстку.
Почему сайт на телефоне отображается уменьшенным?
Обычно отсутствует мета-тег viewport или какой-то элемент шире экрана, и браузер уменьшает масштаб, чтобы его вместить.