Сайт криво выглядит на телефоне: что делать
Чаще всего причина в одном блоке, который шире экрана: из-за него появляется горизонтальная прокрутка и всё «съезжает». Найдите его и задайте элементам ширину в процентах вместо фиксированных пикселей.
Типичные виновники
- Таблица или широкая картинка с жёстко заданной шириной.
- Длинное слово или адрес без пробелов — они не переносятся.
- Блок в несколько колонок, который не перестраивается в один столбец.
- Отступы, заданные в пикселях: на широком экране они уместны, на узком съедают половину ширины.
Как найти виновный блок
Если страница ездит вбок, причина почти всегда одна: какой-то элемент шире экрана. Найти его можно перебором — прокручивайте страницу вниз и смотрите, на каком блоке появляется горизонтальный сдвиг. Чаще всего это таблица, широкая картинка с заданной шириной в пикселях, длинная ссылка без пробелов или блок с фиксированными отступами.
Лечится это заменой фиксированных размеров на относительные: ширина в процентах вместо пикселей, максимальная ширина картинки в сто процентов родителя, перенос длинных слов. В конструкторах для этого обычно есть готовые настройки блока — искать нужно параметры ширины и отступов именно в мобильном режиме.
Что проверять, кроме ширины
Размер шрифта: основной текст мельче 16 пикселей заставляет прищуриваться, и часть людей просто закрывает страницу. Размер кнопок: пальцем сложно попасть в элемент меньше 44 пикселей. Всплывающие окна: на узком экране они часто закрывают всё содержимое, а крестик оказывается за краем. И порядок блоков — на телефоне колонки становятся друг под другом, и то, что справа, оказывается внизу.
Уточняющие вопросы
Достаточно ли уменьшить окно браузера для проверки?
Для грубой проверки да, но настоящий телефон покажет больше: там другая плотность пикселей, свои шрифты и адресная строка, которая съедает часть экрана.
Почему на телефоне текст мельче, чем в конструкторе?
Обычно потому, что размер задан в пикселях без отдельной настройки для мобильных. В большинстве конструкторов размер шрифта можно задать отдельно для узких экранов.
Нужна ли отдельная мобильная версия сайта?
Нет, современные сайты делают адаптивными: одна страница перестраивается под ширину экрана. Отдельный мобильный сайт означает двойную работу при каждом изменении.