Отзывчивый метатег онлайн урок.


Я склонен использовать это:

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

Хотя я вижу, что это рекомендуется много:

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

Это означает, что браузер (возможно) отобразит ширину страницы по ширине своего экрана. Поэтому, если этот экран имеет ширину 320 пикселей, окно браузера будет иметь ширину 320 пикселей, а не уменьшаться и отображать 960 пикселей (или что-то еще, что делает это устройство по умолчанию, вместо ответного метатега).

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

Есть больше атрибутов этот тег поддерживает:

СвойствоОписание
widthШирина виртуального видового экрана устройства.
ширина устройстваФизическая ширина экрана устройства.
heightВысота «виртуального видового экрана» устройства.
высота устройстваФизическая высота экрана устройства.
начальная шкалаНачальное масштабирование при посещении страницы. 1.0 не масштабируется.
минимальная шкалаМинимальная сумма, которую посетитель может увеличить на странице. 1.0 не масштабируется.
максимальный масштабМаксимальная сумма, которую посетитель может увеличить на странице. 1.0 не масштабируется.
масштабируемый пользователемПозволяет устройству увеличивать и уменьшать масштаб. Значения да или нет.

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

Вы, вероятно, хотите этого в своем CSS:

@-ms-viewport{
width: device-width;
}

Полезно знать: изменение значения этого метатега с использованием JavaScript работает, страница будет реагировать на новое значение. Измените весь тег и замените его или измените свойствоcontent. Не слишком распространенная потребность, но она может возникнуть.