Зачем в head пишут meta viewport и что будет, если его не ставить?
В шаблонах страниц всегда вижу строчку <meta name="viewport" content="width=device-width, initial-scale=1">. Что она делает? Я её удалил — на компьютере вроде ничего не изменилось. Зачем она тогда нужна?
1 ответ
Этот мета-тег важен для телефонов, поэтому на компьютере ты разницы и не увидел.
Без него мобильный браузер думает, что страница рассчитана на широкий экран, и показывает её «уменьшенной» — как будто ты смотришь сайт издалека, всё крошечное, надо щипать пальцами, чтобы увеличить.
Строка:
<meta name="viewport" content="width=device-width, initial-scale=1">
говорит: «считай ширину страницы равной ширине экрана устройства и не масштабируй». Тогда текст и кнопки выглядят нормального размера на телефоне.
Ставь его всегда в <head> — без него любая адаптивная вёрстка и media-запросы на мобильном работать как надо не будут. Проверить эффект легко: открой страницу, нажми F12 → иконка телефона (режим устройства) и посмотри с тегом и без.