Convert vh Einheiten in JS px

Question

Leider 100vh ist nicht immer der gleiche wie 100% Browser Höhe wie im folgenden Beispiel gezeigt werden.

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>

Das Problem ist ausgeprägter auf iPhone 6+ mit, wie die obere Adressleiste und untere Navigationsleiste ausdehnen und zusammenziehen auf blättern, sind jedoch in der Berechnung für 100vh nicht enthalten.

Der tatsächliche Wert von 100% Höhe kann mit window.innerHeight in JS erworben werden.

Gibt es eine bequeme Möglichkeit, um die aktuelle Umwandlung von 100vh Pixel in JS zu berechnen?

Ich versuche zu vermeiden Dummy-Elemente mit Inline-Stilen nur zur Berechnung 100vh zu generieren.

Für die Zwecke dieser Frage, eine feindliche Umgebung übernehmen, wo max-width oder max-height können falsche Werte produzieren, und es gibt kein vorhandenes Element mit 100vh irgendwo auf der Seite. Grundsätzlich sei angenommen, dass alles, was schief gehen kann hat mit Ausnahme der nativen Browser-Funktionen, die garantiert werden, sauber sein.

Das Beste, was ich mit so weit kommen habe, ist:

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; 
} 

aber es scheint weit zu ausführlich für den aktuellen Wert für 100vh Berechnung und ich bin nicht sicher, ob es noch andere Probleme mit ihm .

Answer 1

Wie wäre:

function viewportToPixels(value) { 
    var parts = value.match(/([0-9\.]+)(vh|vw)/) 
    var q = Number(parts[1]) 
    var side = window[['innerHeight', 'innerWidth'][['vh', 'vw'].indexOf(parts[2])]] 
    return side * (q/100) 
} 

Verbrauch:

viewportToPixels('100vh') // window.innerHeight 
viewportToPixels('50vw') // window.innerWidth/2