Что такое метатег 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 каждой страницы, которую необходимо масштабировать под разрешение экрана. В метатеге используются различные атрибуты, о которых подробнее расскажем далее.

• width — задает ширину видимой области так, чтобы она была равна CSS ширине устройства;
• initial-scale — атрибут, с помощью которого устанавливается начальный масштаб страницы;
• 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 можно задать без написания кода вручную. Для этого необходимо скачать и установить соответствующий плагин.

Проверить адаптацию страницы под мобильные устройства можно с помощью инструмента Mobile-friendly от Google. Чтобы провести тест, введите URL-адрес страницы или HTML-код и нажмите «Проверить страницу».

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

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

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