meta viewport. Как он работает?

Статья, в которой познакомимся с метатегом viewport. Рассмотрим, какие значения может принимать атрибут content данного метатега, а также как его настроить для адаптивного и фиксированного сайта.

Что такое viewport

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

Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4″ до 6″. А самую большую — мониторы компьютеров, размеры диагоналей которых могут превышать 24″.

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

После того, как появились смартфоны и планшеты, viewport одних устройств стал сильно отличаться от viewport других устройств. Это привило к тому, что сайты, созданные для компьютеров, стало невозможно или затруднительно просматривать на смартфонах. Выходом из этой ситуации послужило появление адаптивной разметки. Адаптивная — это такая разметка, которую можно настроить под различные размеры экранов. Осуществляется создание адаптивной разметки с помощью медиа запросов, которые появились в спецификации CSS3 и в настоящий момент поддерживаются всеми основными браузерами.

Но и у адаптивной разметки появились проблемы после того как появились смартфоны с высокой плотностью пикселей и, следовательно с высоким разрешением. Чтобы более детально разобраться в этой ситуации рассмотрим следующий пример, в котором сравним 2 устройства.

Первое устройство — это смартфон Apple iPhone 3 (диагональ 3.5″). Данный телефон не имеет высокую плотность пикселей. У данной модели она составляет 163ppi (меньше 200ppi). Физическое разрешение данного смартфона составляет 320×480. Такое разрешение соответствует диагонали, если его сопоставить с разрешением мониторов настольных устройств (компьютеров). Т.е. на веб-странице этого смартфона, текст, выполненный размером 16px, будет также хорошо читаемым как на мониторе компьютера.

Второе устройство — это смартфон Apple iPhone 4. Он имеет диагональ такую же как у смартфона Apple iPhone 3, т.е. 3.5″. Но отличается от него тем, что имеет высокую плотность пикселей (326ppi). Следовательно, более высокое разрешение — 640×960 при тех же размерах экрана. Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 2 раза меньше. Таким образом, текст будет реально выглядеть на 8px. Такая страница будет уже трудночитаемой. Чтобы сделать эту страницу пригодной для чтения, её представление необходимо увеличить в горизонтальном и вертикальном направлении в 2 раза (отмасштабировать).

Назначение метатега viewport

Метатег viewport был разработан компанией Apple для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы. Другими словами meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi). Данный метатег предназначен в большой степени для адаптивных сайтов, но с помощью него можно улучшить представления веб-страниц, имеющих фиксированную или гибкую разметку.

Добавление meta viewport к веб-странице

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

Настройка meta viewport для адаптивных веб-страниц

Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:

<meta name="viewport" content="width=device-width, initial-scale=1">

Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить. В данном случае эта информация касается viewport.

Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

• width=device-width
• initial-scale=1

Рассмотрим каждый из них более подробно.

Первый параметр (width=device-width) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройству (device-width). Данная ширина (CSS) — это не физическое разрешение экрана. Это некоторая величина независящая от разрешения экрана. Она предназначена для того, чтобы мобильный адаптивный дизайн сайта отображался на всех устройствах одинаково независимо от их плотности пикселей экрана.

Например, смартфон iPhone4 с физическим разрешением 640×960 имеет CSS разрешение 320×480. Это означает то, что сайт с метатегом viewport (width=device-width) на этом устройстве будет выглядить так как будто бы это устройство имеет разрешение 320×480 (в данном случае вместо device-width будет подставляться значение 320px). Т.е. на один CSS пиксель будет приходиться 4 физических пикселя (2 по горизонтали и 2 по вертикали).

Как же определить какое CSS разрешение будет иметь тот или иной экран устройства?

Определяется оно в зависимости от того какую экран имеет плотность пикселей. Если экран имеет плотность меньше 200ppi, то CSS-разрешение будет равно физическому. Если экран имеет плотность пикселей от 200 до 300 (ppi), то CSS-разрешение будет в 1.5 раза меньше физического. А если экран имеет плотность более 300ppi, то CSS разрешение будет определяться делением физического разрешения на некоторый коэффициент. Данный коэффициент определяется по формуле плотность/150ppi с округлением обычно до 2, 2.5, 3, 3.5, 4 и т.д.

Плотность пикселей экрана	CSS коэффициент
меньше 200ppi	1
200 — 300 ppi	1.5
больше 300ppi	плотность/150 (с округлением до 2, 2. 5, 3, 3.5, 4 и т.д.)

Рассмотрим несколько примеров:

• Apple iPhone 3: физическое разрешение 320×480, плотность пикселей — 163ppi. Плотность пикселей меньше 200, следовательно, CSS коэффициент равен 1. CSS разрешение будет равно физическому, т.е. 320×480.
• Apple iPhone 6: физическое разрешение 750×1344, плотность пикселей — 326ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 326/150=2 (2.2 округляем до 2). CSS разрешение будет равно 375×667.
• LG G4: физическое разрешение 1440×2560, плотность пикселей — 538ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 538/150=4 (3.6 округляем до 4). CSS разрешение будет равно 360×640.
• Galaxy S3 mini: физическое разрешение 480×800, плотность пикселей — 233ppi. Плотность пикселей больше 200, следовательно, CSS коэффициент будет равен 1.5. CSS разрешение будет равно 320×533.
• Galaxy S5: физическое разрешение 1080×1920, плотность пикселей — 441ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 441/150=3. CSS разрешение будет равно 360×640.

Второй параметр initial-scale — устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.

meta viewport и не адаптивные страницы

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

Например, можно сделать так чтобы ширина страницы масштабировалась под ширину устройства (если ширина макета больше CSS ширины). Но учтите, что масштабирование работает только в разумных пределах.

Осуществляется это тоже с помощью установления параметру width значения device-width. Т.е. для не адаптивных сайтов в раздел head необходимо добавить следующую строчку:

<meta name="viewport" content="width=device-width">

Кроме того, разработчики браузеров позаботились даже о тех, кому трудно добавить эту строчку. В этом случае экран устройства будет по умолчанию иметь CSS ширину, равную 980px. Это позволит отобразить без прокрутки (по ширине) большинство десктопных макетов сайтов.

Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:

<meta name="viewport" content="initial-scale=1">

Дополнительные параметры meta viewport

Кроме основных параметров, тег meta viewport содержит много других.

Вот некоторые из них:

• minimal-scale — задаёт минимальный масштаб;
• maximal-scale — устанавливает максимальный масштаб;
• user-scalable — указывает, может ли пользователь управлять масштабом или нет.

Примеры viewport с использованием дополнительных параметров:

<!-- viewport, без возможности его увеличения пользователем -->
<meta name="viewport" content="width=device-width, initial-scale=1. 0, maximum-scale=1.0, user-scalable=no">

<!-- viewport, c возможностью его увеличения пользователем -->
<meta name="viewport" content="width=device-width, user-scalable=yes">

<!-- viewport, имеющий ширину 1024 пикселя -->
<!-- Веб-страница, с фиксированным макетом (например, с шириной 1024px или меньше) будет изначально отображаться на экране мобильного просмотра без прокрутки -->
<meta name="viewport" content="width=1024">

что это такое и для чего используется мета-тег, как настроить и что делать, если значение не задано — Топвизор

Содержание

Через Яндекс. Вебмастер

В статье рассказываем, что такое метатег viewport и зачем он нужен, а в конце — ссылки на ресурсы, где можно проверить, правильно ли указан метатег и нет ли ошибок в отображении контента.

Что такое метатег viewport и зачем он нужен

Viewport (с англ. «окно просмотра») — это видимая пользователю область веб-страницы, которую он может просмотреть без прокрутки. 

Область просмотра пользователя на десктопе

Одноимённый метатег viewport нужен для того, чтобы сообщить браузеру, как изменять масштаб страницы в зависимости от размера устройства пользователя. 

❗️Метатег viewport не адаптирует страницу сам. Он только сообщает, что сайт нужно отобразить по определённым правилам. Чтобы браузер правильно понял команду, у страницы должна существовать мобильная версия дизайна.

Благодаря метатегу viewport пользователь видит экран не так:

Контент вылезает за размеры экрана

А так:

Контент адаптирован под размер экрана

Атрибуты метатега viewport 

У метатега есть свои атрибуты — специальные команды, которые сообщают определённые параметры метатега.  

Как «читать» исходный код страницы: теги и атрибуты, важные для SEO 

Эти команды передаются с помощью атрибута content. Все указанные внизу значения meta viewport будут вписаны в атрибут content через запятую, например, так:

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

Width 

Определяет, какая ширина будет у области просмотра:

• если значение атрибута device‑width, то ширина страницы подстроится под ширину экрана; 

• если значение в пикселях, например 400, атрибут укажет браузеру всегда отображать страницу шириной 400 пикселей. Атрибут может принимать значение от 200 до 10 000 пикселей;

• если значение атрибута не указано, будет по умолчанию приниматься такое значение: в Safari с мобильного — 980 px, Opera — 850 px, Android WebKit — 800 px, IE — 974 px.

Если у сайта есть адаптивный дизайн, рекомендуется использовать значение width=device‑width

Height

Определяет, какая высота будет у области просмотра. Указывать его не обязательно, если уже указан атрибут width, так как браузер сохранит соотношение сторон.

Если выставить значение атрибута device‑height, то высота сайта подстраивается под высоту экрана. Но атрибуту можно присвоить и точное значение от 233 до 10 000 пикселей, например 800 пикселей. Тогда высота страницы будет постоянной.

Initial‑scale

Передаёт начальный масштаб страницы. Указывает, во сколько раз область просмотра станет больше или меньше по сравнению с её исходным значением. 

Значение атрибута может быть от 0,1 до 10. Если указать 1,0, область просмотра масштабируется под размер экрана 1:1.

User‑scalable

Разрешает или запрещает пользователям приближать и отдалять страницу. 

Если user‑scalable имеет значение «yes», масштабировать можно, если «no» — нельзя. По умолчанию значение user‑scalable всегда «yes», поэтому его можно не указывать.

Minimum‑scale и maximum‑scale

С их помощью можно задать минимальный и максимальный масштаб: minimum‑scale и maximum‑scale от 0,1 до 1,0. Значение 1,0 говорит браузеру «не масштабировать».

Минимальный и максимальный масштаб используют, чтобы изменить настройки браузеров. Например, масштаб браузера Safari по умолчанию 0,25. Его можно изменить, если задать minimum‑scale или maximum‑scale.

Как настроить масштаб страницы через метатег viewport 

Метатег указывают в HTML‑коде каждой страницы в разделе <head></head> в таком виде:

<meta name="viewport" content="...">

Внутри атрибута content описываются все необходимые значения через запятую. Например:

Пример HTML‑кода

Как подобрать масштаб

Экраны гаджетов имеют два типа разрешений:

• физическое — можно измерить;
• CSS — величина, которая зависит от плотности пикселей.

Плотность пикселей — это количество пикселей, которое приходится на один дюйм экрана. Измеряется в PPI.

У разных смартфонов может быть одинаковое физическое разрешение, но CSS‑разрешения будут различаться. Тогда одна и та же страница на одном устройстве отображается нормально, а на втором — с маленьким нечитаемым текстом.

Чтобы такого не допустить, используют атрибуты width и initial‑scale: 

• первый атрибут подгонит область просмотра под CSS‑ширину любого девайса. Записывают атрибут со значением device‑width так: width=device‑width; 

• второй атрибут увеличит масштаб в несколько раз через коэффициент, и текст не будет мелким:

  • если у экрана 200 ppi, то коэффициент 1;

  • если у экрана 200‑300 ppi — коэффициент 1,5;

  • если у экрана больше 300 ppi, коэффициент считают так: плотность пикселей делят на 150, а результат округляют.

Увидеть, как width=device‑width влияет на то, как выглядит страница, можно на примере ниже с iPhone 6. Слева страница подстроилась под размер экрана, но шрифт мелкий. Справа та же страница, но с width=device‑width и с initial‑scale=1. Текст крупнее, читать стало удобнее: 

Влияние атрибутов width=device‑width и initial‑scale на то, как выглядит страница 

Как настроить отображение в зависимости от ориентации экрана

Если пользователь открывает страницу на смартфоне, он может менять её ориентацию, когда переворачивает смартфон в горизонтальное положение. В этот момент некоторые гаджеты увеличивают масштаб по умолчанию. Чтобы масштаб не «прыгал», используют атрибут initial‑scale и задают ему значение 1.

Другой способ запретить устройству менять масштаб — использовать атрибут maximum‑scale. Если задать ему значение 1,0, то при переключении ориентации масштаб не будет меняться.

Как проверить адаптивность страницы

Через Google

После настройки meta viewport можно проверить, как отображается страница на мобильных экранах, не появляется ли полоса прокрутки. Это можно сделать через инструмент «Проверка оптимизации для мобильных» от Google. 

Если страница в порядке, появится такой результат:

Если нет, сервис перечислит ошибки, которые нужно исправить:

Через Яндекс.Вебмастер

Заходите в Вебмастер → Инструменты → Проверка мобильных страниц, указываете ссылку на сайт и нажимаете «Проверить». Загружается отчёт.

Отчет проверки мобильных страниц в Яндекс.Вебмастере

Если в вёрстке есть ошибки, они попадут в отчёт. Иногда бывает так, что метатег viewport указан, а внизу все равно горизонтальная прокрутка. Значит, какой‑то контент не поместился в область просмотра. Надо проверить вёрстку сайта и то, правильно ли записан метатег. 

🔥 Ещё больше про работу с мобильной версией сайта в модуле 3 нашего бесплатного стартового курса по SEO. Курс бесплатный, в конце — сертификат от Топвизора.

Вкратце

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

2. Метатег прописывают на каждой странице в разделе <head></head> со специальными значениями атрибутов — командами, которые управляют метатегом. Среди них:
   • width — даёт браузеру указания, как подстроить страницу под разрешение экрана.
   • height — определяет, какая высота будет у области просмотра.
   • initial-scale — указывает, во сколько раз увеличить масштаб по сравнению с начальным вариантом.
   • user-scalable — разрешает или запрещает пользователям приближать или отдалять страницу.
   • minimum-scale и maximum-scale — меняют настройки браузеров.
3. Проверить работу viewport можно в Google Search Console или в Яндекс.Вебмастере.

HTML | Viewport meta tag for Responsive Web Design

.
07
сен

07
сен

Содержание

• Определение
• Почему область просмотра важна?
• Влияние мобильной области просмотра на SEO
• Передовой опыт в области просмотра
  • Вручную проверьте отзывчивость сайта и готовность области просмотра
• Как настроить мобильную область просмотра для вашего сайта
  • Конфигурация динамического дизайна
  • Настройка отдельных URL-адресов
  • Конфигурация адаптивного дизайна
• Как настроить мобильное окно просмотра в WordPress
• Как настроить мобильную область просмотра в Wix
• Как настроить мобильное окно просмотра в Shopify

Определение

Область просмотра — это метатег, расположенный в HTML. Это видимая часть веб-страницы, которую пользователь может видеть со своего устройства или монитора. Неправильные области просмотра приведут к тому, что пользователям придется прокручивать страницу при просмотре веб-сайта вместо того, чтобы сайт идеально отображался на экранах их устройств.

Почему область просмотра важна?

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

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

Влияние области просмотра для мобильных устройств на SEO

Настройка области просмотра для мобильных устройств — это самый простой и эффективный способ повысить удобство вашего сайта для мобильных устройств. Google упоминает метатеги области просмотра в первую очередь в своих основах адаптивного веб-дизайна и отражает рекомендации по SEO, которым должен следовать каждый сайт. В рамках инициативы mobile-first они продолжают говорить, что «страницы, оптимизированные для различных устройств, должны включать метатег области просмотра в заголовке документа». 9

 ширина может варьироваться от одного устройства к другому.

Избегайте использования в CSS абсолютных значений ширины, таких как см, мм, дюймы, пиксели, точки или ПК. Вместо этого используйте относительные значения ширины, такие как em, ex, ch, rem, vw, vh, vmin, vmax и %. Использование абсолютных значений может привести к тому, что элементы вашего сайта будут загружаться шире, чем позволяет ваша область просмотра.

Вручную проверьте отзывчивость сайта и готовность области просмотра

Самый простой и быстрый способ определить, как ваш сайт выглядит на разных устройствах, — это создать отчет SEOptimer и просмотреть раздел отчета «Визуализация на устройствах»:

Вы Если вы хотите протестировать ваш сайт на своем собственном устройстве или с помощью Chrome "Inspect", чтобы увидеть, как ваш сайт выглядит на различных устройствах, предоставляемых Google. Обратите внимание, что использование браузера Chrome не позволяет перетаскивать экран слева направо или использовать масштабирование.

Когда вы начнете просматривать свой сайт, перетащите правую сторону, чтобы изменить ширину, и посмотрите, насколько хорошо ваш сайт разработан для мобильных пользователей.

Вы также можете выбрать популярные устройства и определить, правильно ли отображается каждое устройство.

Хотите больше устройств? В зависимости от потребностей вашего сайта вы можете определить, какие устройства ваш сайт чаще всего использует в Google Analytics.

Вы также можете перейти на страницу Аудитория > Мобильные устройства > Устройства и найти наиболее популярные устройства, используемые для просмотра вашего сайта.

Если перечисленные устройства не основаны на самых популярных в настоящее время устройствах, вы можете найти устройство по имени или добавить пользовательские устройства на основе соотношения пикселей.

Чтобы добавить пользовательское устройство:

Перейдите в DevTools Настройки  >  Устройства  >  Добавить пользовательское устройство .

Затем введите имя устройства, ширину, высоту, соотношение пикселей устройства и строку пользовательского агента.

Как настроить область просмотра для мобильных устройств

Существует три основных способа разработки мобильного сайта в зависимости от текущего дизайна мобильного сайта: динамический, отдельный URL и адаптивный дизайн.

Динамическая конфигурация

Если у вас в настоящее время динамический дизайн, вам необходимо создать целую отдельную страницу для обслуживания разных версий и указать каждому пользовательскому агенту, к чему им следует обращаться с одного и того же URL-адреса. Вам нужно будет использовать заголовок Vary HTTP на странице. Ниже приведен пример создания такого запроса:

GET /page-1 HTTP/1. 1

Хост: www.example.com

(...остальные заголовки HTTP-запроса.. .)

HTTP/1.1 200 OK

Контент-тип: Text/HTML

VARY: пользователь-агент

Длина контента: 5710

(... Остальные заголовки откликов HTTP ...)

99997 (... отдых от ответов HTTP ...)

99999999999997 (... отдых от ответных средств HTTP ...)

999

99999999999999997 (... Отдых

Дополнительные сведения о конфигурации динамического дизайна.

Конфигурация отдельных URL-адресов

Отдельные URL-адреса требуют дополнительных ресурсов для разработки, а также требуют, чтобы вы создали совершенно новый сайт и разместили его на субдомене, таком как www.m.example.com. Чтобы помочь поисковым системам понять отдельные мобильные URL-адреса, вам необходимо создать аннотации как для компьютеров www.example.com, так и для мобильных устройств www. m.example.com.

Вот примеры того, как аннотировать каждый URL-адрес:

На странице рабочего стола (http://www.example.com/page-1) добавьте:

и на мобильной странице (http://m.example .com/page-1), необходимая аннотация должна быть:

Этот тег rel="canonical" в мобильном URL-адресе, указывающем на страницу рабочего стола, обязателен.

Аннотация к карте сайта должна включать следующее:

xmlns:xhtml="http://www.w3.org/1999/xhtml">

http://www .example.com/page-1/

rel="alternate"
media="only screen and (max-width: 640px)"

href="http://m /page-1" />

Вот дополнительная информация о настройке отдельного URL.

Конфигурация адаптивного дизайна

Адаптивный дизайн — это самый простой и эффективный способ создать веб-сайт, рекомендованный Google. Конфигурация области просмотра должна обеспечивать загрузку страницы с шириной, соответствующей ширине экрана устройства, например:

Элемент области просмотра дает браузеру инструкции по управлению размерами страницы и масштабирование.

Добавление кода width=device-width обеспечит изменение размера страницы в соответствии с шириной экрана, которая также зависит от устройства пользователя.

Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

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

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

Как настроить мобильное окно просмотра в WordPress

Большинство тем в WordPress уже должны иметь область просмотра и быть адаптированы для мобильных устройств. Если SEOptimer обнаружил, что ваша тема WordPress не имеет области просмотра, лучший способ — проверить это в вашей теме WordPress.

Для этого вам нужно перейти к Внешний вид > Редактор > Header.php .

Файл header.php должен содержать:

или

Если в настоящее время у вас нет окна просмотра в файле header.php и вы уже выполнили проверку отклика, обратитесь к разработчику темы.

Если доступ к header.php кажется слишком сложным, вы можете установить плагин «Вставить верхние и нижние колонтитулы» из WordPress и войти в область просмотра в разделе заголовка.

Как настроить мобильное окно просмотра в Wix

К сожалению, на данный момент вы не можете настроить или исправить окна просмотра Wix.

Wix использует метатег:

.

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

Дополнительную информацию о проблеме с областью просмотра Wix можно найти здесь, по следующей ссылке:

https://support.

This entry was posted in Популярное