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

Question

[Алексей Скляров]

Возникла проблема: есть сайт, у которого прописано в мета-тегах <meta name="viewport" content="width=1200px">. То есть на телефоне показывается десктопная версия (возможно временно). Но у меня шапка имеет высоту 100vh, что, как можно понять, на телефоне выглядит не так круто, потому что ориентация там..хм...книжная.

Хочу для прописать условие, чтобы на мобильных устройствах эта высота была в PX. Как это можно сделать?

Answer 1

[Артем Волков]

В CSS есть медиа запрос

@media screen and (max-width:1200px) {
    header{
        height: 100px; // как вариант
    }
}

Comments

[Алексей Скляров]

у меня стоит подключенным файл с кучей таких медиа запросов, но они не работают (как и должно быть). так что этот вариант бессмыслен

[Алексей Скляров]

Кроме того, если будет монитор с 1000 пкс экраном, то эти изменения будут и для него тоже. а нужно только для телефона, на котором сайт просматривается

Answer 2

[cssfish]

ловите тогда телефоны скриптом device.js и пишите стили в духе

.mobile .header {
  height: 100px; 
}

(он при загрузке детектит юзерагент и проставляет классы для Html тэга)