Вёрстка съезжает и обрезается: три разные причины

Короткий ответ

Не исправляйте «обрезается» одним способом. Проверьте симптом:

• меняется по высоте, когда браузер скрывает адресную строку;
• появляется только после публикации;
• вся страница чуть ездит вправо-влево;
• повторяется у клиента на десктопе, но не у вас.

Это четыре наблюдения, которые быстро разделяют три причины. Ни одна из них не лечится правилом «первый экран должен быть 700 пикселей».

Причина 1. Плавающая высота мобильного браузера

На телефоне экран и видимая область страницы — не одно и то же. Адресная строка и нижняя панель появляются и исчезают при прокрутке. Значит свободная высота меняется уже после загрузки страницы.

В исследованном CSS Тильды 100vh встретился 15 раз — в попапах, корзине, формах, избранном, масштабировании и каталоге. Современные единицы 100dvh, 100svh, 100lvh и собственная переменная --vh не встретились ни разу.

Это не означает, что каждый блок Тильды обязательно сломан. Это означает более узкую вещь: если ваша полноэкранная композиция зависит от того, что 100vh всегда равно видимой области, встроенной компенсации в исследованном рантайме нет.

Для первого экрана безопаснее заранее решить, что важнее:

• все элементы должны быть видны сразу — тогда композиции нужна минимальная безопасная высота и возможность стать выше;
• экран должен быть ровно полноэкранным — тогда нужен динамический размер и проверка при появлении панелей;
• часть следующего блока должна выглядывать — тогда не привязывайте точный ритм к нижнему краю устройства.

Причина 2. Редактор — не опубликованная страница

В редакторе дизайнер видит макет в служебной оболочке. После публикации браузер запускает скрипты Zero Block, подставляет реальные шрифты, расставляет flex-классы и пересчитывает адаптивы. Поэтому снимок редактора не доказывает итоговую геометрию.

Сделайте две проверки на одном размере:

1. Откройте опубликованную страницу в обычной вкладке, а не предпросмотр.
2. Обновите её без кеша и дождитесь загрузки шрифтов и изображений.

Если элемент сначала находится правильно, а потом прыгает, причина связана с поздней загрузкой или скриптом. Если он сразу расположен иначе, проверяйте его контейнер, брейкпоинт и режим автолэйаута. Подробная диагностика этого расхождения есть в статье «В редакторе работает, на сайте нет».

Причина 3. Один элемент шире экрана

Иногда «всё съехало» на самом деле означает: страница получила горизонтальную прокрутку. Достаточно одной картинки, длинной ссылки, отрицательного отступа или анимации, чей начальный кадр выходит за границу.

Проверка в консоли ничего не меняет и показывает подозреваемых:

const tooWide = [...document.querySelectorAll('body *')].filter((node) => {
  const rect = node.getBoundingClientRect();
  return rect.left < -1 || rect.right > window.innerWidth + 1;
});

console.log(tooWide);

Не ставьте сразу overflow-x: hidden всему сайту. Так полоса исчезнет, но вылетевшая кнопка или текст останутся за экраном. Кроме того, overflow на родителе влияет на липкие элементы. Сначала исправьте ширину конкретного узла, и только затем решайте, нужно ли обрезание как часть дизайна.

Почему у заказчика обрезан первый экран на компьютере

Это объединённый случай из плана A24. На десктопе тоже нет универсальной высоты: клиент может открыть сайт в невысоком окне, с увеличенным системным масштабом, панелью закладок или масштабом браузера. Ширина монитора ничего не говорит о доступной высоте страницы.

Поэтому число 700 — не стандарт. Если на первом экране обязательны заголовок, кнопка и важное примечание, композиция должна выдерживать меньшую высоту:

• сократите декоративные вертикальные отступы раньше, чем основной текст;
• разрешите секции стать выше видимой области;
• не прижимайте обязательную кнопку к нижнему краю абсолютной координатой;
• проверьте масштаб браузера 100% и 125%, а также невысокое окно;
• не обещайте клиенту «всё всегда без прокрутки», если контента больше экрана.

Чек-лист перед сдачей клиенту

• Опубликованная страница проверена, а не только редактор.
• Телефон проверен с видимой и скрытой адресной строкой.
• Страница не двигается горизонтально одним пальцем.
• Важные кнопки доступны при увеличенном тексте.
• Первый экран переживает невысокое окно и масштаб 125%.
• Попап, меню и корзина не обрезают собственное содержимое.
• После загрузки шрифта и картинок элементы не прыгают.

Если поломка остаётся, запишите модель устройства, браузер, ширину и высоту видимой области, масштаб и момент появления дефекта. «На айфоне обрезано» — это симптом; эти данные уже превращают его в воспроизводимую задачу.