utilizzando modernizr per rilevare vh, vw con calc

Question

Quindi ho incontrato un problema in cui un browser è compatibile con unità vh, vw ed è compatibile con calc(), BUT non è compatibile con vh, unità vw in calc. Quindi non sono sicuro di come usare modernizr per testare per quel caso specifico.

Qualche idea per questo? Grazie mille!

Answer 1

È possibile aggiungere un test personalizzato in Modernizr che controlla questo per voi:

Modernizr.addTest('calcviewportunits', function(){ 
    var computedHeight, 
     div = document.createElement('div'); 

    div.style.height = 'calc(10vh + 10vw)'; 
    document.body.appendChild(div); 
    computedHeight = window.getComputedStyle(div).height; 
    document.body.removeChild(div); 

    return computedHeight !== "0px"; 
}); 

provata su Chrome 26 (restituisce false) e 41 (ritorna true). Non ero sicuro di quali siano esattamente i browser e non lo supportano, ma puoi semplicemente eseguire il seguente violino per testarlo: http://jsfiddle.net/3dthsgv5/6/

Questo non prova solo per calc(), tuttavia, trovo meglio separare le preoccupazioni. Un controllo separato per calc() supporto è già presente in Modernizr (non solo nella configurazione di default) e può essere trovato qui: How can I check if CSS calc() is available using JavaScript?

inoltre opportuno notare che le unità delle viste non sono widely supported ancora. I casi in cui entrambe le unità calc e viewport sono supportate ma non combinate sono molto rare.