Что такое метатег viewport и как он используется

Viewport — это область на экране устройства, которая видна пользователю без прокрутки экрана. Представьте страницу, которая нормально отображается на экране ноутбука. Буквы, значки и прочие элементы находятся в оптимальном размере, вам удобно читать текст.

Эта же страница на смартфоне оказывается совсем неудобной для прочтения. Вам приходится двигать изображения и текст вправо и влево, вниз и вверх. Если задать тег Viewport, веб-страница примет нормальный вид:

На изображении слева страница отображается без тега Viewport, а справа с его помощью задаются параметры отображения. В вариант слева не внедрен адаптивный дизайн сайта и тег Viewport, поетому он не удобен для чтения и пользователь быстрее покинет такой сайт.

При адаптивном дизайне ему будет удобнее читать текст, совершать покупки и переходить между разделами сайта. Чтобы веб-страница отображалась нормально на устройствах с разным разрешением, важно задать правильные настройки тега Viewport.

Для начала ответим на вопрос: Viewport units что это? Для этого нужно понять, из чего состоит этот тег. В большинстве случаев строка с тегом Viewport выглядит так:

Первый параметр Width дает команду браузеру адаптировать по ширине страницу к устройству, на котором она открыта. Масштабирование ширины страницы определяется автоматически, если указано значение «device-width». Также можно установить числовое значение от 200 до 10000 пикселей. В этом случае параметр будет выглядеть так:

В таком случае макет экрана не может быть менее 800 пикселей по ширине. Если это значение окажется больше, браузер растянет видимую область до полного масштаба. Потребность в использовании Viewport появилась после активного распространения смартфонов с высоким разрешением экрана. В них даже адаптированные под мобильные устройства сайты не всегда отображаются правильно.

Например, возьмем для сравнения два смартфона с диагональю 3,5 дюймов, но разной плотностью пикселей. В первом этот показатель составляет до 200 пикселей, а во втором — более 300 пикселей. Одна и та же веб-страница будет выглядеть по разному на обоих смартфонах, несмотря на одинаковый размер экрана.

В первом смартфоне страница отобразится нормально и будет удобной для чтения, как на мониторе компьютера. Во втором случае из-за повышенной плотности пикселей текст отобразится в два раза мельче. Чтобы страницу привести в нормальный вид, ее масштаб необходимо увеличить в два раза. Метатег Viewport может использоваться для адаптивных и неадаптивных версий сайтов.

Еще один параметр — initial-scale — означает коэффициент масштабирования. Если указано значение «1», разрешение CSS и устройства приравниваются друг к другу независимо от размера экрана. Можно указать любое значение параметра от 0.1 до 10.

По плотности пикселей. При показателе менее 200 пикселей разрешение экрана будет равно фактическому (коэффициент CSS = 1). Если плотность больше 200, но меньше 300 пикселей — разрешение будет в 1,5 раза меньше фактического (коэффициент CSS = 1,5). При плотности более 300 пикселей разрешение определяется по формуле:

Например, в смартфоне Galaxy S3 показатель плотности пикселей составляет 233, а разрешение экрана 480x800. В данном случае коэффициент CSS = 1,5. Значит, фактическое разрешение будет в 1,5 раза меньше указанного и составит 320x533 пикселей.

В более современном Galaxy S5 плотность пикселей составляет 441, а разрешение экрана — 1080x1920. Так как плотность более 300, нужно разделить 441 на 150, после округления получится 3. Итоговое расширение — 360x640.

В разделе Head каждой страницы, которую необходимо масштабировать под разрешение экрана. Кроме ширины и коэффициента масштабирования можно использовать дополнительные параметры:

• height — задает высоту отображаемой для просмотра области. Можно указать константу device-hight, которая означает автоматическое масштабирование под размер экрана, или числовое значение от 200 до 10000 пикселей;
  
  
• user-scalable — разрешает или запрещает пользовательское масштабирование страницы, задается значением Yes или No;
  
  
• minimum-scale — минимальное значение масштаба (от 0,1 до 10);
  
  
• maximum-scale — максимальное значение масштаба (от 0,1 до 10).
  
  

На практике это выглядит так:

В данном случае пользователь не сможет вручную масштабировать экран, а максимальный масштаб равен его фактическому значению.

Адаптивная верстка meta Viewport поддерживается не во всех версиях мобильных браузеров. Opera Mobile Mini, Symbian, Openwave и некоторые другие версии старых браузеров не реагируют на команды Viewport. В этом случае оптимизация сайта для мобильных устройств может проводиться более старым методом, а именно через метатеги:

Meta теги Viewport на сайтах WordPress можно задать без написания кода вручную. Для этого необходимо скачать и установить соответствующий плагин.

Тег Viewport используется для оптимизации сайтов для мобильных устройств. Он позволяет адаптировать размер видимой области страницы к экрану устройства посетителя.

Наиболее оптимальным значением является автоматическое масштабирование ширины страницы под размер экрана. Также можно задать высоту страницы, коэффициент масштабирования, разрешить или запретить вручную увеличить/уменьшить экран, разрешить или запретить масштабирование сайта.

Для того чтобы работала адаптивная верстка meta, нужно добавить строчку с нужными параметрами в раздел Head каждой страницы сайта или установить соответствующий плагин для своей CMS.