Converti unità vh in px in JS

Question

Sfortunatamente 100vh non è sempre uguale a 100% l'altezza del browser come può essere mostrato nel seguente esempio.

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>

la questione è più pronunciato su iPhone 6+ con come la barra degli indirizzi superiore e inferiore barra di navigazione espandono e si contraggono sul rotolo, ma non sono inclusi nel calcolo per 100vh.

Il valore effettivo di altezza 100% può essere acquisito utilizzando window.innerHeight in JS.

C'è un modo conveniente per calcolare la conversione corrente di 100vh in pixel in JS?

Sto cercando di evitare di dover generare elementi fittizi con stili in linea solo per calcolare 100vh.

Ai fini di questa domanda, assumono un ambiente ostile in cui max-width o max-height può essere la produzione di valori non corretti, e non c'è un elemento esistente con 100vh qualsiasi punto della pagina. Fondamentalmente, supponiamo che tutto ciò che può andare storto ha con l'eccezione delle funzioni native del browser, che sono garantite per essere pulito.

Il migliore che è venuta in mente finora è:

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

ma sembra troppo prolisso per il calcolo del valore corrente per 100vh, e non sono sicuro se ci sono altri problemi con esso .

Answer 1

ne dite:

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

Usage:

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