Найдите элемент, который раздвигает страницу

Откройте DevTools, включите mobile viewport и двигайте ширину до момента поломки. Часто виноват один элемент: таблица, iframe, изображение, длинный URL, flex-item или фиксированная ширина.

Подсветить элементы шире viewport

JAVASCRIPT
[...document.querySelectorAll('*')]
  .filter(el => el.getBoundingClientRect().right > document.documentElement.clientWidth)
  .forEach(el => {
    console.log(el);
    el.style.outline = '2px solid red';
  });

Частая проблема → исправление

ПроблемаРешение
width:1200pxmax-width / fluid container
Таблицаwrapper overflow-x:auto
iframe/videoaspect-ratio + width:100%
Изображениеmax-width:100%; height:auto
Flex item не сжимаетсяmin-width:0
Длинный URLoverflow-wrap:anywhere
Форма шире экранаwidth:100%; box-sizing:border-box
Модалка ниже экранаmax-height + overflow-y:auto

Безопасный базовый CSS для мобильной версии

CSS
*, *::before, *::after {
  box-sizing: border-box;
}

img, video, iframe {
  max-width: 100%;
}

img, video {
  height: auto;
}

.flex-child,
.grid-child {
  min-width: 0;
}

.long-text {
  overflow-wrap: anywhere;
}

.table-scroll {
  overflow-x: auto;
}

Не выбирайте breakpoint по модели телефона

Breakpoint добавляют в точке, где контент начинает ломаться. Такой подход устойчивее списка «iPhone 14 / Samsung ...» и лучше работает на новых устройствах.

Что проверить руками

  • меню и offcanvas;
  • формы с экранной клавиатурой;
  • таблицы и карточки;
  • модалки в landscape;
  • кнопки рядом друг с другом;
  • изображения и CLS;
  • масштаб 200% и доступность контента.

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

RuJul Web Development Examples — один ZIP

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