Адаптивний метатег - CSS-хитрощі

Anonim

Я схильний використовувати це:

Хоча я бачу, що це рекомендується багато:

Це означає, що браузер (можливо) буде відображати ширину сторінки на ширині власного екрану. Отже, якщо цей екран має ширину 320 пікселів, вікно браузера буде шириною 320 пікселів, а не таким чином, щоб зменшувати масштаб і показувати 960 пікселів (або що б цей пристрій робив за замовчуванням, замість адаптивного метатегу).

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

Цей тег підтримує більше атрибутів:

Власність Опис
ширина Ширина віртуального вікна перегляду пристрою.
ширина пристрою Фізична ширина екрану пристрою.
висота Висота «віртуального вікна перегляду» пристрою.
пристрій-висота Фізична висота екрану пристрою.
початково-масштабна Початкове масштабування під час відвідування сторінки. 1.0 не збільшує масштаб.
мінімальний масштаб Мінімальна сума, яку відвідувач може збільшити на сторінці. 1.0 не збільшує масштаб.
максимальний масштаб Максимальна сума, яку відвідувач може збільшити на сторінці. 1.0 не збільшує масштаб.
масштабована користувачем Дозволяє пристрою збільшувати та зменшувати масштаб. Значення - так чи ні.

Зазвичай рекомендується не запобігати масштабуванню, оскільки це дратує і потенційно є проблемою доступності.

Ви, ймовірно, захочете це також у своєму CSS:

@-ms-viewport( width: device-width; )

Корисно знати: зміна значення цього мета-тегу за допомогою JavaScript працює, сторінка відреагує на нове значення. Або витягніть весь тег, і замініть, або змініть contentвластивість. Не надто поширена потреба, але вона може виникнути.