Урок 31. Ошибки: Проблемы разных экранов: viewport и DPR

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~65 мин 🎯 Сложность: Средняя
#meta #viewport #image-set

⚡ Кратко

Топ-ошибки: забыли meta viewport, ставят breakpoint по модели телефона, width: 100vw вместо 100% (даёт горизонтальный скролл), картинка без 2× для retina.

Ошибка 1 — забыли meta viewport

Без строки <meta name="viewport"> media queries срабатывают как для десктопа ~980px, и мобильная версия не включается. Всегда добавляйте её в <head>.

<!-- правильно -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Ошибка 2 — width: 100vw даёт скролл

На странице с вертикальным скроллбаром 100vw шире области контента на ширину этого скроллбара — появляется лишняя горизонтальная прокрутка. Чаще нужен 100%. Ниже — как это ломается.

width: 100vw → блок шире контейнера, появился скролл →
/* ❌ ломается */
.full { width: 100vw; }

/* ✅ правильно */
.full { width: 100%; }

Прочие частые ошибки

  • Breakpoint по названию устройства. Лучше смотреть, где ломается конкретный блок, а не угадывать модель телефона.
  • Жёсткая ширина без ограничения. Fixed width часто создаёт горизонтальный скролл; используйте max-width, min(), minmax().
  • Картинка без учёта DPR. На retina растровый файл «1×» выглядит мутным — отдавайте 2×/3× через srcset или image-set().
  • Слишком много переопределений. Если CSS трудно читать, проверьте порядок media queries и выбранный подход: mobile-first или desktop-first.
  • Игнорирование пользовательских настроек. Для движения и темы учитывайте prefers-reduced-motion и prefers-color-scheme, когда это влияет на интерфейс.

Навигация