Создание полезных сайтов

Страница прокручивается вбок на телефоне: как найти и исправить причину

Отсутствие полосы прокрутки ещё не доказывает, что страница помещается. Найдите широкий элемент, исправьте его размеры и проверьте доступность всего текста и кнопок.

Автор coru · Опубликовано 2026-10-21 · Обновлено 2026-10-21

1. Повторите движение страницы вбок

Откройте опубликованную страницу на телефоне и отметьте, что двигается вбок: вся страница, отдельная таблица или меню после открытия. Запишите браузер, ширину и состояние страницы. В инструментах разработчика также проверьте ширину 360 CSS-пикселей, затем 320. CSS-пиксели описывают размеры разметки, а не физические точки из характеристик телефона.

Если вся страница выглядит необычно мелкой, сначала проверьте настройку viewport. MDN описывает метатег viewport со значением width=device-width. Сохраните возможность увеличивать страницу. Руководство W3C по перестроению содержимого использует ширину 320 CSS-пикселей для обычного текста с вертикальной прокруткой; проверка одной ширины не заменяет полный аудит доступности.

2. Найдите элемент до изменения стилей

В инструментах разработчика включите выбор элемента и наведите указатель на край лишней области. Изучите выбранный элемент и его родителей. Проверьте вычисленную ширину, минимальную ширину, внутренние и внешние отступы. Временно отключайте по одному подозрительному правилу ширины или запрету переноса. Делайте это в браузере или на тестовой версии: такие опыты дают подсказки, но ещё не являются сохранённым исправлением.

Для простой проверки ширины документа выполните в консоли две команды: const page = document.documentElement; затем page.scrollWidth > page.clientWidth. Значение true указывает на избыточную ширину содержимого. MDN описывает эти измерения. Значение false не доказывает, что всё видно: содержимое может обрезать другой контейнер.

Не подставляйте ширину из характеристик телефона и не считайте, что window.innerWidth всегда равен ей. На измерения влияют масштаб и особенности мобильной области просмотра. Запишите значения и проверьте сам текст и элементы управления.

3. Выберите исправление для найденной причины

Названия классов ниже — примеры для уже найденных элементов. Применяйте подходящее правило к конкретному компоненту, затем повторно проверяйте его содержимое.

Широкая картинка: .article-image { max-width: 100%; height: auto; }. Приём W3C удерживает обычное изображение в доступной области и сохраняет пропорции. Если родитель уже слишком широк, исправьте и его.
Длинный адрес или слово: .contact-text { overflow-wrap: anywhere; }. Правило разрешает перенос, когда он необходим. Уберите непреднамеренное white-space: nowrap у этого текста. Для ссылки также может помочь короткая содержательная подпись.
Дочерний элемент flex или grid не сжимается: попробуйте .card-content { min-width: 0; } именно на этом элементе. MDN объясняет, что автоматический минимум может зависеть от содержимого. Длинному тексту всё ещё нужен перенос; колонки с промежутками иногда приходится располагать друг под другом.
К ширине прибавляются отступы: .notice { box-sizing: border-box; max-width: 100%; }. Border-box включает внутренние отступы и рамки в ширину. Внешние отступы он не поглощает и большее min-width не отменяет. Проверьте их отдельно.

4. Карточка ремонтного кафе: сохранить видимой кнопку

21 октября 2026 года Coru проверила собственную локальную страницу вымышленного ремонтного кафе в Chrome 155.0.8059.12. У страницы были боковые отступы по 16 пикселей и расчёт размеров border-box, у карточки — width: 760px и кнопка записи справа. Это контролируемый браузерный пример, а не сообщение об ошибке настоящего кафе.

При ширине области разметки 360 значение scrollWidth документа составляло 776, а правый край кнопки находился на отметке 758. Добавление overflow-x: hidden к body не изменило эти размеры. Скрытие переполнения не помогло кнопке поместиться. MDN описывает hidden как обрезание: широкому дочернему элементу это не задаёт новый размер.

После удаления скрывающего правила и добавления max-width: 100% к карточке её ширина стала 328, scrollWidth документа — 360, а кнопка поместилась целиком. Повторные проверки при 320, 390 и 1280 тоже прошли. В сломанном мобильном примере innerWidth также равнялся 776: сравнение scrollWidth с innerWidth пропустило бы ошибку.

Чтобы повторить сравнение, создайте страницу с отступами, карточкой фиксированной ширины и кнопкой справа. Запишите clientWidth и scrollWidth документа и видимость всей кнопки до скрытия, после скрытия и после ограничения ширины карточки. Это проверка разметки, а не работы записи на ремонт.

5. Прокручивайте широкую таблицу внутри её области

Колонки сравнительной таблицы иногда необходимо сохранить рядом, чтобы данные оставались понятными. W3C предусматривает содержимое, смысл которого требует двух измерений. Поместите такую таблицу в отдельную обёртку, например .table-scroll { max-width: 100%; overflow-x: auto; }, а окружающие абзацы оставьте в пределах страницы.

Короткой подсказкой сообщите, что таблицу можно прокручивать. Проверьте доступ к последней колонке пальцем и с клавиатуры. Если для получения фокуса обёртке требуется tabindex="0", добавьте видимую рамку фокуса, role="region" и доступное имя, связанное с её видимым заголовком. MDN описывает различия этого поведения между браузерами.

6. Повторно проверьте опубликованный результат

Если причина осталась неясной, опишите в форме обратной связи ниже состояние страницы, браузер, ширину и подозрительный элемент. Воспроизводимый пример полезнее сообщения «на мобильном всё сломано».

Перезагрузите страницу при ширине 320, 360 и на широком экране; по возможности проверьте настоящий телефон. Запишите браузер и масштаб.
Откройте меню и длинные сообщения, дождитесь изображений, проверьте обе языковые версии. Прочитайте самый длинный заголовок и адрес.
Клавишей Tab доберитесь до элементов управления. Убедитесь, что видны подпись, рамка фокуса и весь элемент.
Дойдите до последней колонки локальной таблицы: окружающие абзацы не должны требовать прокрутки вбок.
Запишите: страница и состояние ___; ширина ___; проблемный элемент ___; изменённое правило ___; до ___; после ___. Отдельно отметьте непроверенные состояния.