Несколько слов о meta viewport

01.04.2020

Мета тег viewport, предназначен для указания, как на мобильных устройствах должна отображаться "область просмотра". Далее будет несколько примеров.

Можно "закрепить" обрастать просмотра, жёстко указав размеры, например:

 
<meta name="viewport" content="width=700">

- при открытии сайта на мобильном устройстве (для десктопов и инструментов отладки, это не работает), сайт отобразиться так, как будто экран приблизили и на нем помещается всего 700xp.

Поэтому, если у сайта фиксированная ширина, то стоит указать ее в viewport

Если сайт адаптивный, то хорошим решением будет такой вариант:

 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width - ширина устройства
initial-scale=1.0 - зум по умолчанию 100%
user-scalable=no, maximum-scale=1.0, minimum-scale=1.0 - запрет на ручной зум, но тут стоит уточнить, что если с версткой есть проблемы и какие-то элементы, даже теоретически, могут оказаться за экраном, то так делать не стоит. Пользователь просто не сможет до них добраться.


Категории: Web, HTML, CSS
Яндекс.Метрика