Веб Мастерская | Веб разработка и программирование | ИТ | IT
Без категории · 22 июля 2026 г.
HTML
HTML Привет, коллеги! 👋 Сегодня в мастерской разбираем тег, который 90% новичков просто слепо копируют из шаблона, не понимая, как он работает. Речь о <meta name="viewport">. 🛠 Зачем он нужен? Без него мобильный браузер думает, что вы открыли десктопный сайт, сжимает его до ширины ~980px и показывает «мыльный» текст, который нужно зумить пальцами. Вьюпорт говорит браузеру: «Эй, мы на мобилке, адаптируй ширину под экран!». 💻 Эталонная строка: <meta name="viewport" content="width=device-width, initial-scale=1.0"> 🔍 Разбираем параметры: • width=device-width — ширина страницы равна ширине экрана устройства. (Если у вас iPhone 390px, то и страница будет 390px, а не 980px). • initial-scale=1.0 — начальный масштаб 1:1. Никакого автоматического уменьшения текста при загрузке. 💡 Совет из продакшена: Часто вижу, что во фреймворках или старых туториалах вьюпорт пихают с параметрами `maximum-scale=1.0, user-scalable=no` (запрет зума). Не делайте так, если не пишете сложное PWA-приложение, имитирующее нативное! Запрещая зум, вы сделаете больно людям с плохим зрением. Это жирный минус к карме и к UX. Вот так. Идем дальше кодить! 🚀 #вебразработка, #webdev, #webdevelopment, #frontend, #backend, #fullstack, #созданиесайтов, #php, #js, #html, #css, #mysql, #ВебМастерская, #СтудияАбрамова, #АбрамовВеб