Как работают единицы измерения viewport (vw, vh)

«Как работают единицы измерения viewport (vw, vh)» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Нет, ширину физического экрана устройства изменить нельзя — это фиксированная характеристика железа. Однако можно управлять viewport (видимой областью) через метатег в HTML:

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

Или динамически менять масштаб через JavaScript:

document.querySelector('meta[name="viewport"]')
  .setAttribute('content', 'width=1200, initial-scale=1');

Но это лишь изменяет виртуальное представление, а не реальное разрешение экрана. Для адаптивного дизайна лучше использовать CSS-медиазапросы:

@media (min-width: 768px) {
  /* Стили для планшетов и выше */
}