Метатеги для мобильной среды специально приспособлены для мобильных устройств. К ним относят отключение масштабирования, изменение статусной панели, приказ окну браузера занять удобную позицию для чтения.
Метатег viewport
Позволяет задать масштабирование и логические размеры для окна браузера, которые соответствуют области просмотра на мобильном устройстве. На большинстве мобильных устройств масштаб страницы можно контролировать, но размер области просмотра не изменяется и остается равным размеру экрана.
На ОС iOS, Android, webOS, Windows Phone и Opera Mobile поддерживается метатег, который описывает область просмотра. Он поддерживает список команд, разделенных запятыми. Ими можно задавать масштаб, высоту, ширину области просмотра, запретить браузеру масштабирование совсем или в диапазоне от максимального до минимального значения.
- width=<num>|device-width. Ключ используют, когда ширина области должна быть равна ширине экрана. Здесь допустимы числовые значения. По умолчанию оно близко к 980. Максимальное — 10000. Минимальное значение – 200.
- height=<num>|device-height. Значение, которое устанавливается в device-height, влияет на высоту области просмотра. Минимальное – 233.
- user-scalable=no|yes. Дает возможность масштабировать область просмотра. Чтобы его запретить, задайте здесь no, чтобы разрешить — yes. По умолчанию разрешено, данные не прокручиваются.
- initial-scale=<float>. Задает множитель масштабирования, который применяется при просмотре веб-страницы. По умолчанию - 1.0.
- minimum-scale=<float>. Минимальный лимит пользовательского масштабирования страницы. Минимальное значение — 0.25.
- maximum-scale=<float>. Максимальный лимит пользовательского масштабирования страницы. Минимальное значение — 10.
По умолчанию в большинстве браузеров ширина области просмотра - 980 пикселей. Пользователь устанавливает значение. Ему не приходится увеличивать загруженное. Идеальный вариант – приравнять ширину окна к ширине устройства. Для автора нет разницы, с каким устройством будет работать посетитель.
Но такая тактика хороша только с мобильными сайтами и приложениями. Для них также важным остается метатег