Что это
Таблица со многими столбцами, или построенная с фиксированными измерениями вместо гибких, естественно широкая — что нормально на настольном экране, но не сжимается, чтобы уместиться на гораздо более узком экране телефона, как это делает большинство другого содержимого на хорошо построенной странице. Вместо этого она либо заставляет всю страницу прокручиваться вбок, либо становится неудобно сжатой и трудночитаемой.
Почему это важно
Боковая прокрутка — одна из более режущих глаз вещей, с которыми может столкнуться посетитель на телефоне — она ломает нормальный паттерн прокрутки вверх-вниз, который люди ожидают везде в интернете, и легко по-настоящему упустить содержимое, находящееся прямо за пределами экрана справа, не осознавая, что оно там вообще есть. На в остальном идеально удобной для мобильных странице одна широкая, необёрнутая таблица может быть единственной вещью, которая заставляет весь опыт казаться сломанным для мобильного посетителя.
Как это исправить
- Определите, у каких таблиц на вашем сайте много столбцов или они построены с фиксированной шириной в пикселях, а не гибкой.
- Оберните каждую широкую таблицу в контейнер со свойством CSS
overflow-x: auto— это сохраняет собственный макет таблицы нетронутым, но позволяет посетителю прокручивать только эту таблицу вбок движением пальца, вместо смещения всей страницы. - Для таблиц со многими столбцами рассмотрите вместо этого адаптивный паттерн таблицы — например, укладывая каждую строку в свою собственную подписанную карточку на узких экранах вместо сохранения традиционного макета сетки при любом размере.
- Если вы используете конструктор сайтов, проверьте, есть ли у его блока таблицы уже переключатель «мобильная прокрутка» или «адаптивность», прежде чем строить пользовательское исправление.
- Протестируйте исправление на реальном узком экране телефона (или в режиме мобильного предпросмотра вашего браузера), а не просто изменяя размер окна настольного браузера, поскольку сенсорная прокрутка ведёт себя иначе, чем мышь.