Перевод: Перестаньте использовать мета-тег viewport если не понимаете как он работает

Перестаньте использовать мета-тег viewport если вы не понимаете зачем он нуженВ давние годы, когда смартфоны только пришли на Землю, они знали, что интернет не готов к ним... так что, они полагали, что все вебсайты имеют ширину около 1000px (980px на iPhone) и меняли их масштаб так, чтобы поместить их в экран. Таким образом, метатег <meta name="viewport"> был создан, в основном, для того, чтобы сказать этим "умникам" (игра слов "smartphone" - англ. умный телефон), что ваш вебсайт подготовлен для них (имеется в виду мобильная версия или адаптивный дизайн).

В настоящее время некоторые популярные фронт-энд фреймворки, такие как HTML5 Boilerplate, Twitter Bootstrap и другие включают этот мета-тег по умолчанию, что хорошо для адаптивного дизайна, но губительно для "традиционного" дизайна. Вот как это работает.

Вкратце

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

Любые дополнительные параметры в атрибутах обычно ни к чему хорошему не приводят.

UPD: Brad Frost правильно подсказал, вы должны также использовать данный мета-тег если вы делаете мобильный сайт, так что это нужно не только для адаптивных сайтов.

Device-width

Это наиболее важная часть тега viewport, она сообщает браузеру, какой ширины ваш сайт. Выглядит это так:

этим мы сообщим браузеру "мой сайт адаптирован к вашей ширине". Если мы используем этот параметр для не адаптивного сайта, веб-сайт будет увеличен в размерах от левого верхнего угла, а пользователи будут вынуждены уменьшать масштаб (просто, чтобы понять, где они находятся) и увеличивать, чтобы увидеть детали. Не самый лучший вариант, не так ли?

Initial-scale

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

Maximum-scale

Установка данного параметра означает установку максимального изменения масштаба. На сайтах, где доступ к информации является главным приоритетом (большинство, если не все, веб-сайты), установив maximum-scale=1 вы не позволите пользователю использовать масштабирование. Это вовсе не нужно если у вас адаптивный веб-сайт. И вполне возможны случаи, когда пользователю может понадобиться использовать увеличение: мелкий шрифт контента (мало ли, вдруг у него плохое зрение), разглядывать детали на фотографии и т.д., так что фиксировать масштабирование было бы неразумно как минимум по эстетическим соображениям.

User-scalable=no

Этот параметр полностью отключает возможность увеличить или уменьшить масштаб, таким образом, это даже хуже, чем фиксирование максимального увеличения. Если же у вас на то действительно веская причина (например, вы создаете веб-приложение и необходимо избежать масштабирования в форме входа и т.п.), попробуйте добавлять и удалять его с помощью JavaScript, только для действия, которое вы хотите исправить. В любом случае, помните, что пользователи смартфонов используют масштабирование при просмотре практически любого веб-сайта и такое действие как потребность уменьшения после заполнения формы может быть просто рефлекторным, и вы вероятно, не захотите вмешиваться в это.

Combo breaker

Теперь рассмотрим такой случай: не адаптивный сайт (фиксированная ширина 960px шириной) со следующим мета-тегом viewport:

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

Просто не используйте viewport мета-тег понапрасну

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

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

Оригинал статьи (англ): "Stop using the viewport meta tag (until you know how to useit)"

От переводчика:
Еще одна статья про использование viewport на русском.

Поделитесь с друзьями:



2 комментариев к “Перевод: Перестаньте использовать мета-тег viewport если не понимаете как он работает

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>