Что такое meta name viewport
Viewport это площадь страницы сайта, которая будет видима для пользователя без скроллинга. На адаптированных сайтах, страницы легко просматривать с любого устройства без горизонтального скролла, вне зависимости от параметров экрана. На таких сайтах пользователь легко может читать текст, скроллить контент, просматривать картинки, заполнять формы и делать покупки.
Типичный сайт, оптимизированный для мобильных устройств, включает мета тег viewport с таким содержанием:
<meta name="viewport" content="width=device-width, initial-scale=1">Параметр width устанавливает размер окна просмотра. Этот параметр может быть прописан, как определенное количество пикселей, или в виде специального значения device-width, что означает ширину экрана в пикселях CSS в масштабе 100%.
Параметр initial-scale фиксирует уровень масштабирования при первой загрузке URL. Параметры maximum-scale, minimum-scale и user-scalable устанавливают как пользователи могут увеличивать или уменьшать страницу во время просмотра.
Отказ от использования meta name=”viewport”
Бразуер использует инструкции, указанные в теге viewport для масштабирования страницы сайта. Если этот тег не использовать, браузер будет показывать пользователю страницу в стандартном размере (так как она выглядит на десктопе) и попробует оптимизировать отображение контента путем увеличения шрифтов и отдельных элементов. Так, пользователь увидит только тот контент, что поместился на экране мобильного устройства или планшета, и ему придется руками его масштабировать или использовать горизонтальный скролл для просмотра всего содержания страницы.
