С чего начать проверку адаптивности

Сначала откройте DevTools → Device Toolbar и медленно меняйте ширину viewport, а не только выбирайте готовую модель телефона. Хорошая адаптивность ломается не «на iPhone», а в конкретной точке, где контент перестаёт помещаться.

Проверьте, что в <head> есть viewport, а макет не собран на жёстких ширинах.

Базовый viewport и responsive image

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

<img
  src="/img/product-800.webp"
  srcset="/img/product-480.webp 480w,
          /img/product-800.webp 800w,
          /img/product-1200.webp 1200w"
  sizes="(max-width: 576px) 100vw, 50vw"
  alt="Описание изображения">

Что ломается на мобильном чаще всего

ПроблемаКак проявляетсяЧто проверить
Фиксированная ширинагоризонтальный скроллwidth в px, min-width
Большая таблицараздвигает страницуoverflow-x:auto
Длинное слово/URLкарточка шире экранаoverflow-wrap, min-width:0
Изображение
одит из контейнераmax-width:100%, height:auto
Flex/Gridэлементы не сжимаютсяmin-width:0, minmax(), flex-wrap
Форма
одят за экранwidth:100%, box-sizing
Модалкаобрезана по высотеmax-height, overflow-y

Responsive grid без привязки к конкретным телефонам

CSS
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.card { min-width: 0; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Пример Bootstrap 5 сетки

HTML
<div class="container-fluid container-xl">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-4">...</div>
  </div>
</div>

Как проверять перед публикацией

  • 320–360 px: нет горизонтального скролла;
  • формы можно заполнить без принудительного зума;
  • кнопки и ссылки не перекрывают друг друга;
  • таблицы прокручиваются внутри своего контейнера;
  • изображения не грузятся заведомо огромными без необходимости;
  • Landscape не ломает модалки и меню;
  • при увеличении масштаба браузера контент остаётся доступным.

Скачать примеры для веб-разработки

RuJul Web Development Examples — один ZIP

Связанные материалы