Сайт выглядит на телефоне иначе, чем на компьютере — что не так?

Вы открываете сайт на компьютере — всё аккуратно на своих местах. Открываете на телефоне — и вдруг текст вылезает за экран, картинки обрезаны, кнопки налезают друг на друга, а меню пропало. Первая реакция закономерна: «Сайт сломался?» или «Дело в моём телефоне?»

Хорошая новость: в большинстве случаев виноват ни ваш телефон, ни серьёзная поломка. Это проблема адаптивного дизайна — того, как сайт подстраивается под разную ширину экрана. Компьютер имеет ширину около 1400px, телефон — около 380px. Если сайт не был сделан так, чтобы перестраиваться на малой ширине, он ломается. В этой статье я объясню, что именно происходит, каковы реальные причины и как это чинится — чтобы вы могли говорить со знанием дела с тем, кто делал ваш сайт.

Почему сайт выглядит на телефоне иначе (кратко)

Сайт — это не одна застывшая «картинка». Браузер получает код и раскладывает его в зависимости от доступного места. На широком экране есть место расположить элементы рядом; на узком их следует складывать один под другим.

Это называется адаптивным дизайном: одно и то же содержимое, разная раскладка в зависимости от ширины. Когда сделано правильно, на телефоне меню превращается в кнопку-«гамбургер», колонки складываются по вертикали, а текст остаётся читаемым без масштабирования.

Когда сделано неправильно, браузер пытается впихнуть десктопную раскладку в маленький экран. Отсюда и берутся ваши симптомы: текст за краем экрана, обрезанные картинки, наложение элементов. Это не случайный сбой — это отсутствие правила, которое говорит сайту «на маленьком экране перестройся иначе».

5 самых частых причин сломанной вёрстки на мобильном

На практике почти все проблемы на мобильном идут из нескольких понятных причин:

• Фиксированная ширина в пикселях: элемент, заданный как «1000px в ширину», не влезает в экран 380px и выталкивает страницу вбок, создавая тот самый раздражающий горизонтальный скролл.
• Отсутствие мета-тега «viewport»: без строки, которая говорит браузеру использовать реальную ширину телефона, сайт показывается уменьшенным, как десктопная страница издалека.
• Картинки без ограничения ширины: большое фото не уменьшается и вылезает за экран.
• Текст и кнопки слишком мелкие или слишком близко: трудно читать, трудно нажать пальцем.
• Тема или шаблон «адаптивные» только на бумаге: многие готовые шаблоны ломаются, как только вы добавляете свой реальный контент (длинные тексты, фото другого формата).

Если вы узнали горизонтальный скролл или «убегающий» текст — почти наверняка это одна из первых двух причин.

Как проверить самому за 2 минуты, без технических знаний

Чтобы поставить диагноз, не нужно быть программистом. Сделайте так:

• Откройте сайт на телефоне и попробуйте потянуть страницу влево-вправо. Если она сдвигается вбок и появляется пустое пространство — какой-то элемент шире экрана, классическая причина.
• Проверьте, нужно ли масштабировать пальцами (pinch), чтобы читать. Если да — вероятно, отсутствует viewport.
• На компьютере откройте сайт и сузьте окно браузера, потянув за край, пока оно не станет узким, как телефон. Адаптивный сайт перестраивается по мере сужения; сломанный остаётся застывшим или обрезает контент.

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

Что значит по-настоящему починить проблему (а не спрятать её)

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

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

На практике это делается через «media queries» — правила в коде, которые говорят «ниже 768px раскладывайся так». Это не огромная работа для того, кто умеет, но требует, чтобы сайт был задуман mobile-first, а не залатан задним числом. Больше половины посетителей местного бизнеса приходят с телефона, так что мобильный — не второстепенный случай, а основной.

Когда стоит переделать и как мы работаем в MPO

Иногда старый сайт можно поправить точечно. В других случаях тема настолько жёсткая, что каждая правка ломает что-то ещё — и тогда в долгую перспективу дешевле новый сайт, построенный правильно с самого начала.

В MPO Web Studio мы строим всё mobile-first: сначала проектируем под телефон, потом расширяем на десктоп — ровно наоборот тому, как ломается большинство сайтов. Мы работаем удалённо по всей стране, с прозрачными ценами и без обещаний вроде «гарантированно №1 в Google» (если вам такое обещают — будьте осторожны).

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