Горизонтальная прокрутка на телефоне — причины и исправление

04.10.2026 · 1 мин чтения · мобильная версия, CSS

Если страница на телефоне «гуляет» вправо-влево, какой-то элемент шире экрана. Для поиска это сигнал плохой мобильной версии, для посетителя — повод уйти.

Главные причины

  • Фиксированная ширина: .container { width: 1200px } вне медиазапросов.
  • min-width у body или обёртки — частая находка в старых шаблонах.
  • Таблицы и картинки с атрибутом width="800" без ограничения max-width: 100%.
  • Встроенные стили вида style="width: 960px" из визуального редактора.
  • Нет <meta name="viewport" content="width=device-width, initial-scale=1"> — тогда телефон показывает страницу как на компьютере.

Как SEOMaster это проверяет

Строка «Горизонтальная прокрутка (по коду)» разбирает HTML главной, встроенные и внешние CSS и ищет ширину от 600px вне медиазапросов. Правила внутри @media (min-width: …) безопасны и не учитываются.

Это оценка по коду, без отрисовки страницы. Точный ответ даёт проверка с браузерным рендером — раздел «Рендеринг JS».

Как исправить

img, video, iframe, table { max-width: 100%; }
.container { width: 100%; max-width: 1200px; }

Широкие блоки переносите в медиазапросы для больших экранов, а для таблиц добавьте обёртку с overflow-x: auto, чтобы прокручивалась только таблица, а не вся страница.

Ещё статьи

Все статьи →