Единицы vw и hw
 

Получается странная вещь: на разных компьютерах в браузерах одной и той же версии они то работают, то нет. А на смартфоне, как не странно, тоже всё работает. Как сделать так, чтобы когда оно поддерживается в css включать vw, а когда нет - % ?

Значит версии разные!
Если у тебя на сайте без них можно обойтись, зачем ты их вообще используешь?

Css

.your-awesome-element {
    /** Всегда устанавливается. */
    width: 50%;

    /** Перезатрёт предыдущее свойство, если поддерживается, иначе проигнорируется. */
    width: 50vw;
}

Modernizr

Нужные тесты в ядро не входят (non-core detects), поэтому нужно собрать его под себя, указав css-vwunit.

Modernizr по умолчанию навешивает классы тестов на html:

.your-awesome-element {
    width: 50%;
}

html.cssvwunit .your-awesome-element {
    width: 50vw;
}

Или на js:

var units = ['%', 'vw'];
var element = document.querySelector('.your-awesome-element');

element.style.width = 50 + units[+Modernizr.cssvwunit];

Спасибо!