Как сделать только хедер адаптивным на неадаптивном сайте?

Question

[deedeeramone]

Есть старый сайт, не адаптированный под малые экраны (PHP + HTML/CSS/JS). В теге head тег <meta name="viewport"..> отсутствует, поэтому содержимое страницы отображается, подстраиваясь по размеру экрана - получается мелко.
До полной адаптации сайт под мобильные еще далеко, но есть желание сделать адаптивным хотя бы хедер.

Т.е. подразумевается, что при открытии на мобильнике хедер будет выглядеть как распространный в таких случаях прямоугольник с логотипом и значком "гамбургер". Нажимая на гамбургер мы видимо модальное окно с пунктами меню

Моих знаний не хватает.

Если указываю в теге head тег

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

. оказывается, что адаптировать теперь нужно все страницы.
Если я не указываю <meta name="viewport" ...>, то стейтменты в медиа-запросах не применяются.

Правильно ли я в принципе понял, что без тега

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

медиа-запросы и контейнер-запросы ("container queries") не работают?

Как мне сделать адаптивным пока только хедер?

Comments

[Aetae]

Помещайте код в <code></code>, а то съедает.

[Сергей delphinpro]

Понимаете правильно. метатег необходим.

[deedeeramone]

Сергей delphinpro, спасибо, т.е. способа адаптировать только хедер нет?

[Сергей delphinpro]

deedeeramone, я уже ответил на ваш вопрос

Answer 1

[cssfish]

С чего вы взяли что медиа-запросы не работают без тега meta viewport???
Единственное, что происходит без этого тега - мобильники задают некую виртуальную ширину устройства, обычно это 980px, и в нее рендерят сайт.

Соответственно вам никто не мешает прописать например@media only screen and (max-width: 990px) {}
и там стили адаптива свои накидать. Просто держите в уме, что оно отрендерится в 980 а потом запихается в 360 например, т.е. размеры задавайте с учетом масштаба, вот и все.