Как ни странно, но обычно мы не задумываемся над тем, что нас не тревожит. В принципе это правильно и логично! Так было ив моем случае, пока поисковик, а именно Гугл не стал ругаться на отсутствия тега Viewport. Тут и пришлось расширить свои знания, которые к сожалению порой у меня хранятся не очень долго, поэтому хотя бы кратко конспектируются в виде статеек на сайте. Так вот, если кртко, то метатег Viewport используется для адаптации сайта ко всем устройствам на которых в настоящий момент отображается страница, будь то компьютер или планшет (телефон). При этом тег должен находиться между тегами head. Ну и само собой необходимо прописать нужные параметры.
Что такое Viewport
Viewport — это по факту область которая видна пользователю без прокрутки экрана. При этом на разных устройствах необходимо менять эту область. Ведь то, что вполне выглядит на компьютере, совсем ни к черту на телефоне. Получится все мелко и неразборчиво!
Итак, та же страница на телефоне оказывается совсем нечитабельной. В итоге приходится скролить изображения и текст. Если же задать тег Viewport, то веб-страница примет нормальный вид. То есть будет отображаться именно текстовая и нужная часть.
Как работает тег Viewport
Взгляните на изображении слева страница отображается без тега Viewport, а справа с его помощью задаются параметры отображения. Вариант слева не удобен для чтения, поэтому пользователь быстрее покинет такой сайт.
При адаптивном дизайне ему будет удобнее читать текст, совершать покупки и переходить между разделами сайта. Чтобы веб-страница отображалась нормально на устройствах с разным разрешением, важно задать правильные настройки тега Viewport.
Настройка тега meta name viewport
Первый параметр Width дает команду браузеру адаптировать по ширине страницу к устройству, на котором она открыта. Масштабирование ширины страницы определяется автоматически, если указано значение «device-width». Также можно установить числовое значение от 200 до 10000 пикселей. В этом случае параметр будет выглядеть так:
<meta name="viewport" content="width=800, initial-scale=1">
... то есть прописываем этот тег для страницы и получаем желаемый результат.