Dönüştürme vh birimleri için JS

Question

Ne yazık ki aşağıdaki örnekte gösterildiği gibi 100vh100% tarayıcı yüksekliği ile aynı değildir.

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>

konu üst konum çubuğu ve alt navigasyon çubuğu genişletmek ve Tomardaki sözleşme, ancak 100vh için hesaplamaya dahil edilmemiştir nasıl 6+ iPhone'da daha belirgindir.

100% yüksekliğinin gerçek değeri, JS'de window.innerHeight kullanılarak edinilebilir.

JS piksel 100vh mevcut dönüşüm hesaplamak için uygun bir yolu var mı?

Yalnızca 100vh hesaplamak için satır içi stilleri olan kukla öğeler oluşturmaya gerek duymamaya çalışıyorum.

Bu sorunun amacına uygun

, max-width veya max-height yanlış değerler üreten olabilir düşman bir ortam varsayalım, ve her yerde sayfadaki 100vh ile varolan elemanı yoktur. Temel olarak, yanlış gidebilecek hiçbir şeyin, temizliği garanti edilen yerel tarayıcı işlevleri haricinde olduğunu varsayalım.

Ben şimdiye kadar ile geldim en iyisi:

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

ama çok ayrıntılı 100vh için geçerli değerini hesaplamak için görünüyor ve diğer konular onunla varsa emin değilim .

Answer 1

ne dersiniz:

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

Kullanımı:

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