javascript - JSでvh単位をpxに変換する

Question

残念ながら、次の例に示すように、ブラウザーの高さ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。

高さの実際の値は、JS100%で使用することで取得できます。window.innerHeight

100vhJS で現在のピクセルへの変換を計算する便利な方法はありますか?

を計算するためだけにインライン スタイルでダミー要素を生成する必要がないようにしています100vh。

この質問の目的のために、不適切な値を生成する、max-widthまたは生成する可能性のある敵対的な環境を想定し、ページのどこにも既存の要素はありません。基本的に、正常であることが保証されているネイティブ ブラウザー機能を除いて、問題が発生する可能性があるものはすべてあると想定してください。max-height100vh

これまでに思いついた最高のものは次のとおりです。

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です。他に問題があるかどうかはわかりません。