Viewport html что это?

Viewport — область просмотра, с которой браузер связывает отображение документа. В мобильном браузере страница без подходящего объявления может получить широкую область раскладки, а затем уменьшиться целиком. Из-за этого текст выглядит мелким, даже когда отдельные размеры в CSS кажутся разумными.

Для обычной адаптивной страницы используйте <meta name="viewport" content="width=device-width, initial-scale=1"> в разделе head. Параметр ширины помогает браузеру рассчитывать страницу по ширине устройства в CSS-пикселях. Начальный масштаб задаёт исходное представление документа. Это не количество физических пикселей матрицы экрана, поэтому не нужно подставлять разрешение телефона вручную.

Объявление работает вместе с вёрсткой. Если таблица жёстко имеет ширину в тысячу пикселей или картинка не ограничена контейнером, одна строка meta не заставит их разумно перестроиться. Проверьте изображения, длинные неразрывные строки, минимальные ширины и контейнеры. Исправляйте источник переполнения, а не скрывайте его глобально, лишая человека части содержимого.

Не отключайте масштабирование пользователя ради сохранения макета. Людям может требоваться увеличение для чтения, а ограничение масштаба не решает исходную проблему адаптации. Пусть оформление выдерживает изменение размера текста и узкое окно.

После добавления объявления сравните страницу на реальном телефоне и в инструментах проверки размеров браузера. Проверьте несколько разделов, а не только верхнюю часть. При повороте устройства или открытии клавиатуры доступная область может меняться, поэтому интерфейс не должен зависеть от единственного однажды измеренного размера. Viewport помогает задать правильную основу, но содержимое и стили всё равно нужно проверять вместе.