Адаптивная вёрстка: как тестировать, брейкпойнты, viewport и device presets

Адаптивный сайт — это не роскошь, а необходимость: более 60% трафика приходит с мобильных устройств, а Google использует Mobile-First индексацию. Рассмотрим, как грамотно тестировать адаптивность и какие инструменты использовать.

Что такое адаптивная вёрстка

Адаптивная (responsive) вёрстка — подход, при котором макет сайта подстраивается под размер экрана устройства. В отличие от «мобильной версии» (отдельного URL), адаптивный дизайн использует один HTML с CSS-медиазапросами.

Три кита адаптивности:

1. Гибкая сетка — ширины в процентах, а не пикселях
2. Гибкие изображения — max-width: 100%
3. Медиазапросы — CSS, применяемый при конкретных условиях

Viewport meta tag

Первый шаг к адаптивности — правильный <meta name="viewport">:

<meta name="viewport" content="width=device-width, initial-scale=1">

Без этого тега мобильный браузер отображает страницу как на десктопе (виртуальная ширина 980px) и уменьшает её — текст становится нечитаемым.

Распространённые ошибки:

<!-- Плохо: запрещает масштабирование, нарушает доступность -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<!-- Плохо: фиксированная ширина -->
<meta name="viewport" content="width=320">

Breakpoints

Брейкпойнты — это пороговые значения ширины, при достижении которых меняется макет. Стандартные значения, принятые в отрасли:

Название	Диапазон	Устройства
xs	< 480px	Маленькие телефоны
sm	480–767px	Телефоны
md	768–1023px	Планшеты
lg	1024–1279px	Ноутбуки
xl	1280–1535px	Десктопы
2xl	≥ 1536px	Широкие экраны

В Tailwind CSS это выглядит так:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

В чистом CSS:

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Mobile-First vs Desktop-First

Mobile-First — стили по умолчанию для мобильных, медиазапросы расширяют для больших экранов (min-width). Это рекомендуемый подход: производительность лучше, логика проще.

Desktop-First — стили по умолчанию для десктопа, медиазапросы сужают для маленьких (max-width). Используется при переработке старых сайтов.

/* Mobile-First */
.sidebar { display: none; }
@media (min-width: 1024px) { .sidebar { display: block; } }

/* Desktop-First */
.sidebar { display: block; }
@media (max-width: 1023px) { .sidebar { display: none; } }

Device Presets для тестирования

Реальные размеры популярных устройств, которые важно проверять:

Устройство	Ширина	Высота
iPhone SE	375px	667px
iPhone 14 Pro	393px	852px
iPhone 14 Pro Max	430px	932px
Samsung Galaxy S23	360px	780px
iPad Mini	768px	1024px
iPad Pro 12.9"	1024px	1366px
MacBook Air 13"	1280px	800px
Full HD	1920px	1080px

Частые проблемы адаптивности

Горизонтальный скролл. Причина: фиксированная ширина элемента или отрицательные отступы. Диагностика: overflow-x: hidden на body скрывает проблему, но не устраняет её. Найдите виновника через * { outline: 1px solid red }.

Мелкий текст на мобильных. Браузер увеличивает шрифт автоматически, если посчитает его слишком маленьким. Отключите: text-size-adjust: none (с вендорными префиксами).

Тап-зоны слишком маленькие. По рекомендации Google, интерактивные элементы должны быть не меньше 48×48px.

Изображения выходят за пределы. Добавьте глобально: img, video { max-width: 100%; height: auto }.

Инструменты тестирования

1. DevTools браузера — встроенный эмулятор устройств (F12 → иконка телефона)
2. BrowserStack, LambdaTest — реальные устройства в облаке
3. Responsively App — показывает несколько размеров одновременно
4. reChecker Responsive Tester — быстрая проверка в браузере с пресетами

Инструмент на reChecker

Тестировщик адаптивности на reChecker позволяет проверить любой URL в популярных размерах: iPhone, Android, планшет, ноутбук, Full HD — всё в одном интерфейсе. Переключайтесь между пресетами мгновенно и выявляйте проблемы вёрстки до публикации.

Открыть инструмент на reChecker →