Window matchMedia() Method

JavaScript Window Object

matchMedia()The method returns a new MediaQueryList object representing the parsed result of the specified media query string.

The value of the matchMedia() method can beCSS @media ruleAny media feature, such as min-height, min-width, orientation, etc.

Syntax:

window.matchMedia(mediaQueryString)

if (window.matchMedia("(min-width:　500px)").matches) {
　　　/*　Viewport minimum is500 pixels wide　*/
}
　　　/*　Viewport width less than500 pixels　*/
}

Browser Compatibility

The numbers in the table specify the first browser version that fully supports the matchMedia() method:

Parameter Value

Technical Details

More Examples

If the viewport width is less than or equal to600 pixels, the background color will be coral. If greater than600, it will turn light green:

var size = window.matchMedia("(max-width:　600px)")
myFunc(size)　//　Call listener function at runtime
size.addListener(myFunc)　//　Attach listener function when the state changes
function myFunc(size) {
　　if (size.matches) {
　document.body.style.backgroundColor = "coral";
　　}
　document.body.style.backgroundColor = "lightgreen";
　　}
}

Related References

CSS Tutorial:CSS Media Queries

JavaScript Window Object