Коротко: «размер страницы» в вебе задают не одним свойством, а набором: meta viewport для мобильных, ширина контента через max-width у контейнера, width: 100% у блоков и box-sizing: border-box. Для печати размер листа задаёт @page. Разберём каждый случай.
Что именно вы хотите задать
| Задача | Решение |
|---|---|
| Ширина контента на сайте | max-width у контейнера |
| Адаптив на мобильных | meta viewport |
| Убрать скролл вбок | box-sizing, max-width: 100% |
| Размер листа для печати | @page { size: A4; } |
| Фиксированная ширина сайта | width: 1200px; margin: 0 auto; |
Вкладки: способы с кодом
<meta name="viewport"
content="width=device-width, initial-scale=1">Без этого тега мобильный браузер откроет «десктопную» ширину и уменьшит страницу. Тег обязателен для адаптивных сайтов.
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}Классика: контейнер занимает всю доступную ширину, но не больше 1200px. На узких экранах — уменьшается, поэтому скролла вбок нет.
*, *::before, *::after {
box-sizing: border-box;
}
html, body { margin: 0; padding: 0; }border-box включает padding и border в заданную ширину. Без него блок «раздувается» и появляется горизонтальная прокрутка.
@page {
size: A4;
margin: 15mm;
}Задаёт размер листа и поля при печати. Удобно для страниц-документов: квитанций, инструкций, бланков.
body { width: 1200px; } ломает мобильные: появится горизонтальная прокрутка. Используйте max-width + width: 100%.Почему появляется горизонтальная прокрутка
- Задана фиксированная ширина больше экрана.
- Элемент с
100%плюс padding безborder-box. - Очень длинное слово или таблица не переносятся.
- Отступы у
bodyне сброшены. - Абсолютно позиционированный элемент выходит за край.
html, body { overflow-x: hidden; } /* «скорая помощь», но лучше найти причину */overflow-x: hidden скрывает симптом, а не причину. Сначала найдите элемент, выходящий за границы (в DevTools он подсвечивается).
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Скролл вбок на мобильном | фикс-ширина или padding | max-width: 100%, border-box |
| Страница «мелкая» на телефоне | нет meta viewport | добавить тег |
| Контейнер «прилипает» влево | нет margin: 0 auto |
добавить автоотступы |
| Печать «режет» края | не задан @page |
задать размер и поля |
Проверьте себя
box-sizing: border-box важен?
Вопросы и ответы
Контейнеру — width: 1200px; margin: 0 auto;. Но так вы теряете адаптив; лучше max-width: 1200px.
Растягивает блок на всю ширину родителя. В сочетании с padding без border-box это частая причина прокрутки.
Через @page { size: A4; margin: 15mm; }. Поддерживается браузерами при печати страницы.
Обернуть таблицу в блок с overflow-x: auto — тогда прокручивается только таблица, а не вся страница.
Итоги
- Адаптив начинается с
meta viewport. - Ширину контента задают
max-width, а не фиксированной шириной. box-sizing: border-boxизбавляет от «раздувания» блоков.- Размер листа для печати —
@page.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.