Хозяйка небольшого интернет-магазина каждый вечер смотрит свой сайт на ноутбуке: всё ровно, фото крупные. А покупатели открывают его в метро с телефона. Страница сдвигается вбок под пальцем, кнопка «Купить» оказывается за краем экрана, и человек закрывает вкладку. Она об этом не узнает: заявка просто не приходит.
Почему сайт листается вбок на телефоне
Чаще всего причина в одном элементе, который шире экрана: картинка, таблица, баннер или длинная ссылка. Телефону нечего с ним делать, и он раздвигает всю страницу. Это называют горизонтальной прокруткой (когда страницу можно двигать пальцем вбок, а не только вверх и вниз). На экране шириной 360-414 пикселей это бывает у любого блока с фиксированной шириной в несколько сотен пикселей. Увидеть, где именно ломается вёрстка (раскладка элементов на странице), помогает бесплатная проверка адаптивности: она открывает сайт на семи экранах и отмечает проблемы.
Почему это стоит денег
По данным StatCounter за сентябрь 2026 года, с телефонов приходит 58,99% мирового веб-трафика, с компьютеров 39,26%, с планшетов 1,76%. Кроме того, Google индексирует и ранжирует именно мобильную версию сайта: в документации поиска написано, что он использует для этого мобильное содержимое, загруженное смартфонным роботом. Если на телефоне страница неудобна или содержит меньше, чем на компьютере, сайт может потерять трафик.
1. Картинка или таблица шире экрана
Фото с жёстко заданной шириной, широкая таблица цен или встроенное видео раздвигают страницу. Картинкам задайте max-width: 100%, а таблицу поместите в контейнер с прокруткой внутри, чтобы двигалась только она, а не вся страница.
2. Длинное слово или ссылка не переносится
Адрес сайта, почта или название без пробелов не умеют переноситься и выталкивают страницу. Свойство overflow-wrap: anywhere разрешает браузеру разорвать такую строку в любом месте, чтобы она не вышла за контейнер. Оно работает во всех основных браузерах с октября 2018 года.
3. Кнопки слишком мелкие
Стандарт доступности WCAG 2.2 (критерий 2.5.8, уровень AA) требует, чтобы цель нажатия была не меньше 24 на 24 CSS-пикселей, либо вокруг неё должно оставаться свободное место. Исключение сделано для ссылок внутри предложений. Рекомендация web.dev строже: около 48 пикселей и примерно 8 пикселей между соседними кнопками, потому что это размер подушечки пальца. Если рядом стоят две мелкие ссылки, палец попадает не в ту.
4. Текст слишком мелкий
Нижней границы в стандарте нет, но на практике шрифт меньше 12 пикселей на телефоне читается только с увеличением. Основной текст разумно держать от 16 пикселей: тогда браузеру не приходится увеличивать страницу вручную.
5. Мобильная версия беднее компьютерной
Для индексации Google берёт только то, что показано на телефоне. Если на мобильной версии спрятали часть текста, разделы или описания, при переходе на мобильную индексацию возможна потеря трафика. Вместо удаления Google советует переносить такой контент в аккордеоны или вкладки: место экономится, а текст остаётся на странице.
6. Проверили только на одном телефоне
Экраны телефонов разные. По данным StatCounter за сентябрь 2026 года, самые частые мобильные разрешения: 414 на 896 (13,35%), 360 на 800 (7,54%), 384 на 832 (7,1%) и 390 на 844 (6,05%). То, что ровно на вашем телефоне, может разъехаться на соседнем. Поэтому проверка семи размеров, от телевизора 4K до самого узкого телефона, находит больше проблем, чем один тестовый экран.
Как найти виновника за вечер
Для начала откройте сайт на телефоне и найдите страницу, которая двигается вбок. Если у вас есть компьютер, в браузере нажмите F12 и включите режим эмуляции телефона: страница покажется в узком окне. Дальше ищите блок, правый край которого выходит за экран. Чаще всего это картинка без ограничения ширины, таблица, видео или баннер, а иногда длинная ссылка. Исправление обычно занимает одну-две строки стилей: ограничить ширину картинок, разрешить перенос длинных слов, обернуть таблицу в контейнер с прокруткой.
Потом проверьте кнопки: нажмите каждую пальцем, а не курсором. Если приходится целиться, кнопку надо увеличить или раздвинуть. Затем откройте сайт на самом узком телефоне из списка, потому что именно там ломается то, что на других экранах выглядело нормально.
Как проверить сайт на всех экранах за минуту
- Откройте проверку адаптивности Awe Check.
- Вставьте адрес сайта.
- Посмотрите снимки на телевизоре 4K, большом мониторе, Full HD, ноутбуке, планшете, телефоне и маленьком телефоне.
- Под каждым экраном прочитайте замечание: страница шире экрана, мелкие кнопки или мелкий текст.
Если после обновления темы или плагина вёрстка может поехать снова, в Awe Check Pro сайт проверяется по расписанию, и сообщение об ошибке приходит в Telegram. Для более общего разбора сайта пригодится материал о тихих утечках клиентов.
Сегодня откройте свой сайт на телефоне и проведите пальцем вбок. Если страница сдвигается, у вас есть элемент шире экрана, и пора его искать.
Источники
- Google Search Central: mobile-first indexing - Google использует мобильную версию для индексации и ранжирования.
- W3C: WCAG 2.2, критерий 2.5.8 Target Size (Minimum) - 24 на 24 CSS-пикселя и исключения.
- StatCounter: доля платформ, сентябрь 2026 - 58,99% мобильных.
- StatCounter: разрешения мобильных экранов, сентябрь 2026 - самые частые размеры.
- MDN: overflow-wrap - как разорвать длинную строку.
- web.dev: Accessible tap targets - около 48 пикселей и 8 пикселей между целями.
