Sincronizzazione di query multimediali CSS e JS cross-browser

Question

Quando si lavora su progetti reattivi, utilizzo le query multimediali CSS3, anche con i browser più vecchi che utilizzano respond.js. Ci sono occasioni in cui ho anche bisogno di usare JavaScript/jQuery per manipolare alcuni elementi nella pagina. Tuttavia, quando si utilizza $ (window) .width(), tale valore è spesso diverso dal valore utilizzato nella query dei supporti CSS a causa del chrome del browser e/o della presenza di una barra di scorrimento verticale, il che significa che una query multimediale CSS verrà attivata in un diverso punto di interruzione rispetto alla query multimediale JS.

So che Modernizr allevia questo problema tramite l'uso di Modernizr.mq, ma che funziona solo nei browser che supportano le query multimediali CSS per cominciare, generalmente nel senso che non funzionerà in IE8 e sotto. E se si utilizza un polyfill per aggiungere il supporto di query multimediali a questi browser meno recenti (ad es. Answer.js), Modernizr.mq non funziona più a causa di un conflitto/override tra i due.

Ciò che ho invece fatto è utilizzato un elemento di input nascosto nella pagina e gli ho dato uno stile di larghezza CSS all'interno di ciascuna delle query multimediali. Ho poi avuto una funzione che esegue automaticamente sulla pagina (e sul ridimensionamento) che ottiene quel valore di larghezza ed esegue il seguente:

 if (width == "320px") { 
      //Functions 
     } 

     //481px to 600px 
     else if (width == "481px") { 
      //Functions 
     } 

     //601px to 768px 
     else if (width == "601px") { 
      //Functions 
     } 

     //769px to 960px 
     else if (width == "769px") { 
      //Functions 
     } 

     //769 to 1024px 
     else if (width == "961px") { 
      //Functions 
     } 

     //1024px+ 
     else { 
      //Functions 
     } 

Questo costringe fondamentalmente la JS di lavorare del tutto fuori della media query CSS, la sincronizzazione del Due. Questo può diventare più specifico piuttosto che generico come ho fatto io, invece sparare basato su un elemento specifico e uno stile specifico che cambia su quell'elemento, dipende dalle esigenze del singolo progetto.

La mia domanda è, c'è un modo più semplice per farlo? Ho passato molto tempo a esaminare e sperimentare questo aspetto e mi sembra l'opzione migliore finora che tenga conto anche dei browser più vecchi.

Answer 1

PPK elencato un bel modo per accoppiare il CSS & JS sul suo blog che tipo di esegue il backup del metodo:

@media all and (max-width: 900px) { 
// styles 
} 

if (document.documentElement.clientWidth < 900) { 
    // scripts 
} 

suo post completo su di esso è here.

C'è anche il plug-in enquire.js.