Esecuzione Javascript facoltativa basata su query multimediali

Question

Sto cercando di capire come posso eseguire facoltativamente un blocco di javascript in base alla query dispositivo/media corrente. Sto usando Twitter Bootstrap e hanno essenzialmente due versioni di media query:

@media (min-width: 980px) { ... } <!-- Desktops --> 
@media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones --> 

ho una mappa che genero, ma non sto mostrando nel mobile/piccola versione cinematografica forb andwidth ragioni. Tuttavia, il javascript viene eseguito in background anche se non è possibile vederlo sullo schermo del cellulare. Quindi, sto cercando di trovare un modo in javascript dove posso fare qualcosa di simile:

// Imaginary function 
var screenType = getScreenType(); 

if(screenType == 1) { 
    // Load map 
} 

Sono read about persone impostazione proprietà CSS per valori specifici nei loro media query e poi cercando di trovare quell'elemento nella DOM basato sulla proprietà CSS, ma deve esserci un modo migliore. Qualche idea?

Answer 1

Che ne dici di utilizzare javascript per questo?

<script type="text/javascript"> 

if (screen.width < 980) { 

document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>'); 

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>'); 

} 

</script> 

Answer 2

È possibile anche utilizzare un plugin chiamato MinWidth:

minwidth(940, function() { 
    //do whatever you need 
}); 

ma funziona solo quando la pagina viene caricata non quando si ridimensiona ..

http://edenspiekermann.com/en/blog/responsive-javascript-helpers

Answer 3

Si potrebbe trovare il Richiedi libreria .js utile:

http://wickynilliams.github.com/enquire.js/

CSS-Tricks articolo: http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

Answer 4

L'attuale risposta accettata non è abbastanza buono, si dovrebbe verificare window.matchMedia

È possibile rilevare viewport cambiamenti di quota, ma è necessario calcolare i fattori come l'orientamento e proporzioni e non vi è alcuna garanzia che il nostro calcolo corrisponda alle ipotesi del browser quando applica le regole di media query.

Voglio dire, è possibile calcolare X, ma il vostro browser può essere assunto Y. quindi penso che è meglio usare stesse regole del browser, e lo fa window.matchMedia

var jmediaquery = window.matchMedia("(min-width: 480px)") 
if (jmediaquery.matches) { 
    // window width is at least 480px 
} 
else { 
    // window width is less than 480px 
} 

potete persino ricevere interrogazione la notifica utilizzando un ascoltatore

var jmediaquery = window.matchMedia("(orientation: portrait)"); 
jmediaquery.addListener(handleOrientationChange); 
handleOrientationChange(jmediaquery); 

function handleOrientationChange(jmediaquery) { 
    if (jmediaquery.matches) { 
     // orientation changed 
    } 
} 

Se non è più necessario per ricevere le notifiche sui cambiamenti semplicemente chiamare removeListener()

jmediaquery.removeListener(handleOrientationChange);