Перейти на PRO

Какие типичные ошибки встречаются при адаптивной верстке?

Тип вопроса: Веб-тестирование Вероятность: 10% Категория: QA Тестировщик

Ответ

Основные ошибки адаптивной верстки:

  1. Некорректные медиазапросы

    • Отсутствие или неправильные breakpoints.
    • Неучет ориентации устройства (orientation: portrait/landscape).

  2. Проблемы с контейнерами и сетками

    • Элементы выходят за границы viewport (отсутствие overflow: hidden или max-width: 100%).
    • Использование фиксированных размеров (px) вместо относительных (%, rem, vw/vh).
    • "Ломающаяся" структура Flexbox/Grid при сжатии.

  3. Неадаптивный контент

    • Изображения без max-width: 100% и height: auto растягиваются или обрезаются.
    • Мелкие, нечитаемые шрифты на мобильных (отсутствие @media для font-size).
    • Touch-элементы (кнопки, ссылки) меньше рекомендуемых 44x44px.

  4. Производительность на мобильных

    • Неоптимизированные тяжелые изображения для всех разрешений.
    • Блокирующие рендеринг скрипты и стили для мобильных устройств.

Пример корректного медиазапроса:

/* Базовые стили для мобильных (Mobile First) */
.container {
  padding: 1rem;
  width: 100%;
}

/* Стили для планшетов */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Стили для десктопов */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

Как проверять: Используйте инструменты разработчика браузера (Device Toolbar), эмуляторы и тестирование на реальных устройствах.

Ответ 18+ 🔞

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

Вот смотри, основные косяки, от которых у меня, блядь, волосы дыбом встают:

1. Медиазапросы — ёпта, где они вообще? Ситуация классическая: чувак на большом мониторе сделал, всё красиво. Открыл на телефоне — а там, сука, всё в одну колонку съехало и текст размером с муравья. Почему? Потому что медиазапросы или забыл, или написал их так, что они только для древних Nokia сработают. А про то, что телефон можно повернуть (orientation), он вообще не в курсе, блядь.

2. Контейнеры и сетки — просто пиздец. Вот этот момент — «элементы вылезают за экран». Ну как так-то? Поставил width: 1200px блоку и думаешь, что на экране в 375 пикселей он волшебным образом влезет? Он, блядь, влезет! Правее, сука, и будет горизонтальный скролл, от которого пользователь тебе в сраку чих-пых пожелает. Надо max-width: 100% ставить, ёбана! Или overflow: hidden, если совсем охереть. А ещё эти «гениальные» сетки на флексах, которые при сжатии начинают друг на друга наезжать, как пьяные маршрутки. Красота, блядь.

3. Контент, который сам себе враг. Картинка весом в пять мегабайт на мобильном — это, блядь, просто подвиг идиотизма. У человека трафик кончается, а твоя фотка котика ещё даже не загрузилась. max-width: 100% и height: auto — это, сука, не советы, это заповеди! И кнопки! Сделал ссылку размером 10 на 10 пикселей. Ну и как ты её, тварь, пальцем на телефоне попадешь? Надо минимум 44x44px, ядрёна вошь! И шрифт увеличивай на мобилках, а то люди лупу доставать будут.

4. Производительность — её просто нет. Засунул на сайт три тонны скриптов, пять фреймворков, десять шрифтов. Открыл на старом телефоне — он, бедолага, просто лег и умер. Терпения ноль ебать у пользователя. Оптимизируй изображения, грузи скрипты асинхронно, не еби мозг устройству.

Вот, смотри, как надо делать, чтобы не было стыдно:

/* Сначала делаем для мобильных, ёпта! (Mobile First) */
.container {
  padding: 1rem;
  width: 100%;
}

/* Потом для планшетов — добавили ширину */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Ну и для десктопов, где разгуляться можно */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

Как проверять, чтобы не облажаться? Не верь, блядь, глазам своим на большом мониторе. Открывай инструменты разработчика (этот Device Toolbar), тыкай разные устройства. А лучше — возьми в руки реальный телефон, самый древний, какой найдешь, и попробуй. Вот тогда и поймешь, где ты, сука, накосячил.

В общем, думай головой, а не жопой. Адаптивность — это не «надо бы сделать», а обязательное условие, иначе твой сайт — говно.

© ХакСобесов, 2026
support@hacksobesov.com