Listener di media query

A partire da Windows Internet Explorer 9 è consentito l'uso delle media query CSS3 (Cascading Style Sheets, Level 3) per la modifica degli stili degli elementi, ad esempio la dimensione del tipo di carattere o i margini, in base al dispositivo o al supporto. Novità introdotta in Internet Explorer 10 e nelle app di Windows Store scritte in JavaScript, i listener di media query ti permettono di usare codice script in risposta ai cambiamenti relativi al supporto o all'ambiente in cui viene eseguita la pagina.

I listener di media query sono definiti nella sezione 4.1 della specifica CSSOM View Module, attualmente disponibile come Working Draft W3C.

Per una dimostrazione pratica dell'uso dei listener di media query, vedi l'argomento relativo alle media query e ai listener di media query CSS3 nel sito IE Test Drive.

I listener di media query introducono due nuove funzionalità, descritte più avanti in questo argomento:

  • Valutazione di una media query in runtime con JavaScript
  • Sottoscrizione dei listener alle modifiche nella valutazione della media query

In questo argomento sono incluse le sezioni seguenti:

Creazione di un listener di media query

Per valutare una media query al runtime, viene creato un oggetto MediaQueryList usando il nuovo metodo window, matchMedia.

MetodoDescrizione

matchMedia(sList)

Accetta una stringa contenente una o più media query e restituisce un oggetto MediaQueryList.

 

Il metodo matchMedia accetta una stringa di media query e restituisce un oggetto MediaQueryList. Nell'esempio seguente viene creata una media query che verifica se la larghezza o l'altezza di una finestra è inferiore a una determinata dimensione.


mql = window.msMatchMedia("(min-width:450px)");

L'oggetto MediaQueryList include le proprietà seguenti.

ProprietàDescrizione

matches

Restituisce "true" se l'elenco delle media query corrisponde allo stato della finestra corrente. In caso contrario, restituisce "false".

media

Restituisce la versione serializzata dell'elenco di media query, usata per creare l'oggetto MediaQueryList.

 

L'oggetto MediaQueryList include i metodi seguenti.

MetodoDescrizione

addListener(callback)

Aggiunge la funzione di callback all'elenco di listener per l'oggetto MediaQueryList. La funzione viene chiamata ogni volta che la valutazione della media query cambia.

removeListener(callback)

Rimuovere la funzione di callback specificata dall'elenco di listener per l'oggetto MediaQueryList.

 

La proprietà matches è un valore booleano che restituisce una valutazione della media query. Facendo riferimento all'esempio precedente, matches restituisce true se la larghezza della finestra è maggiore o uguale al minimo specificato.


if (mql.matches) 
{
  // Window is fine. 
} else 
{
  // Window is too narrow.       
}

Sottoscrizione dei listener di media query

Per rilevare le modifiche alle media query, puoi sottoscrivere un listener di un oggetto MediaQueryList. Il metodo addListener accetta una funzione di callback e la richiama quando la valutazione della media query cambia. Usando la media query precedente, nell'esempio riportato di seguito vengono sottoscritte le modifiche della media query.


mql.addListener(sizeChange); // Size change is the callback function.function sizeChange(mql) 
{
  if (mql.matches) 
  {
    // The window is big enough for content.
  } 
  else 
  {
    // The window has gotten too small for content.
  }
}

Il listener richiama la funzione di callback ogni volta che cambia lo stato della media query. Se la finestra viene ridimensionata in base a dimensioni inferiori a quelle indicate nel valore dell'attributo minwidth specificato, viene richiamata la funzione di callback. Verrà richiamata di nuovo quando le dimensioni della finestra risulteranno superiori a quelle di min-width. L'oggetto MediaQueryList viene passato come parametro alla funzione di callback.

Argomenti correlati

Document Object Model (DOM)
Guida di Internet Explorer 10 per sviluppatori

 

 

Mostra:
© 2014 Microsoft