Сайт уезжает за край экрана телефона: что проверить и передать разработчику

Как зафиксировать движение всей страницы

Горизонтальная прокрутка мешает, когда ради чтения обычного текста приходится двигать всю страницу вправо и обратно. В такой ситуации полезно найти блок, который растягивает сайт, сохранить условия появления ошибки и принять исправление на том же содержимом, поскольку запрет прокрутки способен лишь спрятать часть страницы.

Локальная прокрутка бывает уместной. Широкая таблица с взаимосвязанными столбцами может двигаться внутри собственной области, пока заголовок страницы и остальные блоки остаются на месте. Это отличается от случая, когда вслед за таблицей уезжают меню, форма и весь текст. Дальше будем разбирать страницу каталога, где проблема проявляется именно у всей страницы. Общий аудит мобильного сайта затронет другие вопросы, а здесь задача уже и доступнее для самостоятельного описания.

Запись воспроизведения

Для начала сохраните точный адрес, модель телефона, браузер и последовательность действий до появления бокового движения. Если переполнение возникает после открытия фильтра или загрузки фотографии, это обстоятельство важнее общего снимка начального экрана, на котором ошибка ещё не видна. Разработчик сможет повторить состояние. В записи полезно указать ориентацию устройства. Также отмечают увеличение текста в настройках пользователя. Оно может проявить тесный блок, который при стандартном размере выглядит аккуратно.

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

Что означает ширина в пикселях

W3C в критерии Reflow 1.4.10 уровня AA рассматривает перестройку вертикального содержимого при ширине 320 CSS-пикселей, а горизонтального — при высоте 256 CSS-пикселей. CSS-пиксель относится к отображению страницы и не равен простому подсчёту физических точек матрицы телефона. Этот ориентир помогает задать размер окна для испытания. Он объясняет, почему снимок «на большом смартфоне всё нормально» не закрывает вопрос узкого окна и увеличения.

Выбирать единственный популярный телефон для приёмки хуже, чем проверять диапазон ширин и реальные состояния страницы, потому что переполнение связано также с длиной названия, раскрытым меню или размером текста. Эмуляция в браузере помогает специалисту найти границу. Настоящий телефон показывает жесты, клавиатуру и поведение меню. В отчёте сохраняют способ испытания, ширину окна и состояние, на котором обнаружено расхождение.

Что именно выходит за границу

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

Один блок растягивает соседей. Крупное изображение может не уменьшаться вместе с контейнером. Строка с длинным непрерывным кодом может требовать особого переноса. Ряд кнопок может сохранять размеры настольной версии. Внешняя вставка способна принести собственную ширину. У этих причин разные исправления, поэтому объяснение «добавим мобильный стиль» слишком расплывчато для приёмки.

Текст и изображения

Длинные товарные названия стоит испытывать отдельно от коротких заглушек, которые разработчик использовал при создании макета, поскольку реальный ассортимент приносит серии, исполнения и обозначения, не помещающиеся в аккуратную демонстрационную строку. Уменьшать весь шрифт ради такого названия — слабое решение. Читатель потеряет удобство на всей странице. Лучше найти правило переноса и расположения соседних элементов. Для артикула дополнительно сохраняют возможность копирования. Перенос не должен менять сам код товара.

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

Таблица и локальная область

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

Для краткого перечня свойств две колонки «параметр — значение» обычно легче перестроить, чем заставлять покупателя двигать таблицу, тогда как большое сопоставление нескольких изделий может сохранить горизонтальное движение внутри отдельного блока, если без соседства столбцов исчезает смысл сравнения. Выбор основан на задаче чтения. Копировать одно решение на все таблицы не стоит. Товарный специалист помогает определить, какие значения нужно видеть рядом.

Почему обрезка прячет проблему

Свойство overflow-x управляет поведением содержимого, выходящего за горизонтальную границу блока. В MDN значение hidden описывает скрытие переполнения, а auto позволяет прокрутку, когда она требуется, но ни одно из этих названий не объясняет, почему элемент стал слишком широким.

Обрезанная кнопка остаётся потерянной. Когда страницу перестают двигать ценой скрытия правой части формы, внешний симптом исчезает, а действие клиента ломается. То же происходит с последним столбцом цены или окончанием длинной ссылки. При предложении «спрятать горизонтальный скролл» попросите показать полный текст, последние столбцы и крайние кнопки после правки. Запрет движения без просмотра содержимого принимать рано. Исполнитель показывает, какой элемент переполнялся и как после изменения читается его полная информация.

Исправление причины

Изображению может понадобиться ограничение ширины, строке — перенос, а ряду действий — другое расположение кнопок. Широкую таблицу при необходимости помещают в отдельную область прокрутки. Каждый вариант оценивают на исходной странице с теми же данными. Если проблема возникала при раскрытии меню, в приёмке открывают его целиком и проходят все пункты.

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

Что запросить у исполнителя

• Название блока и состояние, в котором он превышал доступную ширину.
• Описание причины обычными словами: фиксированный размер, перенос текста, внешняя вставка или другое ограничение.
• Перечень страниц, использующих тот же блок.
• Демонстрацию полного текста и всех действий после изменения.
• Результат просмотра с длинным содержимым и увеличенным текстом.

Вопрос о причине полезнее требования применить определённое CSS-свойство. Владелец сайта формулирует нужное поведение: обычный текст читается по вертикали, важные действия доступны, широкие данные можно изучить целиком. Разработчик выбирает средство и объясняет последствия. Так задача остаётся понятной маркетологу, не превращаясь в спор о синтаксисе стилей.

Испытание с настоящим содержимым

После исправления откройте первоначальный товар и восстановите состояние меню и фильтров, затем повторите жест, который сдвигал страницу. Для более широкого испытания измените условия: длинный вариант текста, другое положение телефона и открытая форма помогут обнаружить зависимость, которая не попала в исходный пример.

Содержимое важнее ровной границы. Если таблица теперь помещается, но её значения налезают друг на друга, работа ещё не решает задачу покупателя. Если меню осталось внутри экрана, но последний пункт нельзя открыть, приёмка тоже продолжается. Замечание связывают с конкретным действием. Разработчик повторяет его на исправленной версии. Маркетолог подтверждает результат обычным чтением и использованием страницы.

Короткий маршрут владельца сайта

• Прочитать заголовок и описание без движения всей страницы вбок.
• Открыть меню, фильтр и длинный список значений, затем закрыть их.
• Просмотреть все столбцы широкой таблицы внутри её области.
• Выбрать вариант товара и убедиться, что нужные кнопки остались доступны.
• Открыть форму, увеличить текст и прочитать сообщения около полей.
• Вернуться к началу страницы и повторить маршрут после смены ориентации.

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

Как закрыть замечание

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

Последний просмотр можно провести без технических инструментов: прочитать карточку и выполнить нужное действие, не уменьшая страницу жестом и не разыскивая спрятанную за краем кнопку, а локальную прокрутку использовать только для широких данных. Человек не обязан подстраиваться под поломку вёрстки. Страница перестраивается под его окно, сохраняя текст и доступ к действиям.