Я обычно использую это:
Хотя я вижу, что это очень рекомендуется:
Это означает, что браузер (вероятно) будет отображать ширину страницы как ширину своего собственного экрана. Таким образом, если этот экран имеет ширину 320 пикселей, окно браузера будет иметь ширину 320 пикселей, а не масштабирование и отображение 960 пикселей (или что-то еще, что устройство делает по умолчанию, вместо отзывчивого метатега).
Примечание: не используйте адаптивный метатег, если ваш веб-сайт специально не предназначен для адаптивного управления и хорошо работает с таким размером, так как это ухудшит работу.
Этот тег поддерживает другие атрибуты:
| Свойство | Описание |
|---|---|
| ширина | Ширина виртуального окна просмотра устройства. |
| ширина устройства | Физическая ширина экрана устройства. |
| высота | Высота «виртуального окна просмотра» устройства. |
| высота устройства | Физическая высота экрана устройства. |
| начальная шкала | Первоначальный масштаб при посещении страницы. 1.0 не масштабирует. |
| минимальный масштаб | Минимальная величина, которую посетитель может увеличить на странице. 1.0 не масштабирует. |
| максимальный масштаб | Максимальный размер, на который посетитель может увеличить страницу. 1.0 не масштабирует. |
| масштабируемый пользователем | Позволяет устройству увеличивать и уменьшать масштаб. Значения да или нет. |
Обычно рекомендуется не предотвращать масштабирование, так как это раздражает и потенциально затрудняет доступность.
Вы, вероятно, захотите это и в своем CSS:
@-ms-viewport( width: device-width; )Полезно знать: изменение значения этого метатега с помощью JavaScript действительно работает, страница отреагирует на новое значение. Либо весь тег и замените, либо измените contentсвойство. Не очень распространенная потребность, но может возникнуть.