Какие разрешения используются для адаптивной верстки мобильных устройств и планшетов
Что проверяют
Понимаете ли вы, что адаптивная верстка строится вокруг контента и CSS-пикселей, а не вокруг списка моделей телефонов. Следом обычно спрашивают, чем CSS-пиксель отличается от физического и почему без мета-тега viewport медиазапросы на телефоне ведут себя странно.
Как отвечать
Сначала база: браузер работает в CSS-пикселях. У телефона с шириной экрана 1170 физических пикселей и devicePixelRatio равным 3 ширина вьюпорта 390 CSS-пикселей. Чтобы мобильный браузер не рисовал страницу шириной около 980 пикселей и не уменьшал её, нужен <meta name="viewport" content="width=device-width, initial-scale=1">.
Ориентиры по ширине, которые стоит держать в голове:
- телефоны: от 360 до 440 CSS-пикселей, частые значения 360, 375, 390, 393, 412, 430. Минимум, который нельзя ломать, 320: этого требует критерий Reflow в WCAG;
- планшеты: 768, 810, 820, 834 в портретной ориентации и от 1024 в альбомной;
- брейкпоинты фреймворков: у Bootstrap 5 это 576, 768, 992, 1200, 1400, у Tailwind 640, 768, 1024, 1280, 1536.
Дальше покажите подход. Верстка mobile-first: базовые стили для узкого экрана, затем @media (min-width: 768px) или синтаксис диапазонов @media (width >= 768px). Брейкпоинт ставят там, где ломается макет, а не под конкретный айфон. Для компонентов в колонках разной ширины удобнее контейнерные запросы @container. Сетки на grid и flex, размеры в rem, clamp() для шрифтов, srcset и sizes для картинок под разную плотность экрана. Для высоты экрана берут dvh или svh: 100vh в мобильных браузерах считается без учёта адресной строки, и низ страницы уезжает под неё.
Где спотыкаются
Называют физическое разрешение вроде 1080x2400 и строят медиазапросы по нему. Браузер оперирует CSS-пикселями, и такой запрос не сработает.
Пишут max-width: 768px и min-width: 769px, оставляя дыру на дробной ширине при масштабировании. Синтаксис диапазонов или mobile-first через min-width эту проблему снимает.
Проверяют только в эмуляции DevTools. Она не показывает вырез экрана, поведение адресной строки и реальную производительность, поэтому финальная проверка идёт на живом устройстве или в облачной ферме.