Адаптивный сайт — это не роскошь, а необходимость: более 60% трафика приходит с мобильных устройств, а Google использует Mobile-First индексацию. Рассмотрим, как грамотно тестировать адаптивность и какие инструменты использовать.
Что такое адаптивная вёрстка
Адаптивная (responsive) вёрстка — подход, при котором макет сайта подстраивается под размер экрана устройства. В отличие от «мобильной версии» (отдельного URL), адаптивный дизайн использует один HTML с CSS-медиазапросами.
Три кита адаптивности:
- Гибкая сетка — ширины в процентах, а не пикселях
- Гибкие изображения —
max-width: 100% - Медиазапросы — 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 }.
Инструменты тестирования
- DevTools браузера — встроенный эмулятор устройств (F12 → иконка телефона)
- BrowserStack, LambdaTest — реальные устройства в облаке
- Responsively App — показывает несколько размеров одновременно
- reChecker Responsive Tester — быстрая проверка в браузере с пресетами
Инструмент на reChecker
Тестировщик адаптивности на reChecker позволяет проверить любой URL в популярных размерах: iPhone, Android, планшет, ноутбук, Full HD — всё в одном интерфейсе. Переключайтесь между пресетами мгновенно и выявляйте проблемы вёрстки до публикации.