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

[Anonymous]

К сожалению, 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;
}

Код: Выделить всё

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

Фактическое значение 100 %< /code> высоту можно получить с помощью window.innerHeight в JS.

Есть ли удобный способ расчета текущего преобразования 100vh< /code> в пиксели в 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, и я не уверен, есть ли с этим другие проблемы.

Подробнее здесь: https://stackoverflow.com/questions/341 ... o-px-in-js