Преобразование единиц vh в px в JS

К сожалению, 100vh не всегда совпадает с высотой браузера 100%, как показано в следующем примере.

html,
body {
    height: 100%;
}

body {
    overflow: scroll;
}

.vh {
    background-color: blue;
    float: left;
    height: 50vh;
    width: 100px;
}

.pc {
    background-color: green;
    float: left;
    height: 50%;
    width: 100px;
}

<div class="vh"></div>
<div class="pc"></div>

Проблема более заметна на iPhone 6+ из-за того, как верхняя панель местоположения и нижняя панель навигации расширяются и сжимаются при прокрутке, но не учитываются при расчете 100vh.

Фактическое значение высоты 100% можно получить, используя window.innerHeight в JS.

Есть ли удобный способ рассчитать текущее преобразование 100vh в пиксели в JS?

Я пытаюсь избежать создания фиктивных элементов со встроенными стилями только для вычисления 100vh.

Для целей этого вопроса предположим, что во враждебной среде max-width или max-height могут давать неверные значения, а на странице нет элемента с 100vh. По сути, предположим, что все, что может пойти не так, случилось, за исключением нативных функций браузера, которые гарантированно будут чистыми.

Лучшее, что я придумал до сих пор, это:

function vh() {
    var div,
        h;
    div = document.createElement('div');
    div.style.height = '100vh';
    div.style.maxHeight = 'none';
    div.style.boxSizing = 'content-box';
    document.body.appendChild(div);
    h = div.clientHeight;
    document.body.removeChild(div);
    return h;
}

но это кажется слишком подробным для вычисления текущего значения для 100vh, и я не уверен, есть ли с ним другие проблемы.