MediaQueryList object

Maintains a list of media queries for a document and provides properties and methods to check for matches or receive callbacks when a media query changes.

Internet Explorer 10

 

Syntax


 mql = window.matchMedia("(min-height:250px)");

DOM Information

Inheritance Hierarchy

The MediaQueryList does not inherit from any class or interface.

Members

The MediaQueryList object has these types of members:

Methods

The MediaQueryList object has these methods.

MethodDescription
addListener

Adds the callback function to the list of listeners for the MediaQueryList object. The function is called whenever the evaluation of the media query changes.

removeListener

Removes the given callback function from the list of listeners for this MediaQueryList object.

 

Properties

The MediaQueryList object has these properties.

PropertyAccess typeDescription

matches

Read-only

Returns TRUE if the list of media queries matches the state of the current window, or FALSE otherwise.

media

Read-only

Returns the serialized version of the media query list that was used to create the MediaQueryList (MQL) object.

 

Standards information

Remarks

The following example displays a message as when the windows size is less or greater than 250 pixels.

Examples


mql = window.matchMedia("(min-height:250px)");
mql.addListener(sizeChange);
function sizeChange(mql) {
    v = document.getElementById("myDiv");
    if (mql.matches) {
        v.innerHTML = "getting big" + "<br/>" + mql.media;
    } else {
        v.innerHTML = "getting small" + "<br/>"+ mql.media;
    }
}


 

 

Show:
© 2014 Microsoft