Что это
CSS (код стилей, управляющий внешним видом страницы) может задавать размер элементов либо фиксированными единицами, как пиксели (например, блок, установленный точно на 800 пикселей шириной), либо относительными, гибкими единицами вроде процентов, которые автоматически подстраиваются под любой экран, на котором просматривается страница. «Элемент фиксированной ширины» — это любая часть страницы — изображение, таблица, контейнерный блок — с размером, заданным одним из этих фиксированных значений в пикселях, а не гибким.
Это нормально работает, пока экран шире этого фиксированного значения, но в момент, когда реальный экран (особенно телефон) уже, чем фиксированная ширина элемента, у браузера нет иного выбора, кроме как позволить странице прокручиваться вбок, чтобы уместить его, поскольку он не может уменьшить элемент ниже его явно заданного размера.
Почему это важно
Горизонтальная прокрутка — один из самых режущих глаз, безошибочных признаков сломанного мобильного макета, поскольку заставляет посетителя прокручивать в двух направлениях одновременно только для нормального чтения — совершенно другой, более раздражающий паттерн просмотра, чем прокрутка вверх-вниз, которую ожидает каждый мобильный посетитель. Обычно достаточно одного элемента с завышенным размером где-либо на странице (широкое изображение, встроенная таблица, блок фиксированной ширины), чтобы вызвать такое поведение на всей странице, а не только вокруг этого элемента.
Это часто остаток контента, изначально спроектированного для использования на десктопе — таблица, скопированная из электронной таблицы, или изображение, вставленное в его исходных, несжатых пиксельных размерах — а не фундаментальный недостаток общего дизайна сайта.
Как это исправить
- Откройте свой сайт на телефоне (или в узком окне браузера) и проверьте, прокручивается ли вся страница вбок, или найдите конкретный раздел, где это начинается.
- Найдите конкретный элемент, вызывающий переполнение — часто это широкое изображение, встроенная таблица или блок с явно заданной шириной в пикселях в его стилях.
- Замените фиксированные ширины в пикселях относительными единицами вроде процентов, или добавьте правило
max-width: 100%, чтобы элемент никогда не мог превышать фактическую ширину экрана. - Особенно для широких таблиц рассмотрите возможность обернуть их в прокручиваемый контейнер, ограниченный этой одной таблицей, вместо того чтобы позволять всей странице прокручиваться вбок.
- Перепроверьте на телефоне после каждого изменения, чтобы убедиться, что горизонтальная прокрутка исчезла.