Media Queries and Listeners

Article
10/20/2016

Windows Internet Explorer 9 introduced support for media queries in CSS, HTML, XML, and XHTML. Internet Explorer 10 and Windows apps using JavaScript introduced support for media query listeners. Internet Explorer 11 for Windows 10 introduced support for Media Queries Level 4: Interaction Media Features. Media Queries enable web developers to scope a style sheet to a set of precise device capabilities, and media query listeners allow you to use script to react to changes in the media or environment in which your page is running.

Media queries

Media queries enable you to design pages differently for users browsing on a mobile device (that has a very small screen, limited color palette, low resolution, and so on) versus a netbook (that has a small screen, full color palette, high resolution, and so on) versus a standard computer (that has a large screen, full color palette, high resolution, and so on). The full list of media properties supported by CSS3 media queries includes width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, and resolution.

The following declaration is a typical media query, using the @media rule.

@media screen and (max-width:400px) {div {border:none;}}

In this case, screen indicates the target media type, and max-width is the target media property. The declaration states that the specified rules (no border on div elements) are only to be applied when the page is displayed on a screen with a width of at most 400 pixels. You can use media properties together to create even more specific queries, such as the following.

@media screen and (max-width:400px) and (max-height:600px) {…}

This declaration applies the specified rules when the medium is a screen that has a width of no more than 400 pixels and a height of no more than 600 pixels.

Internet Explorer 11 for Windows 10 introduced support for the pointer media feature and the hover media feature from the Media Queries Level 4 specification. These enhancements are designed to allow developers to adapt their UI according to the input precision and modality of a user’s device. Developers can create a single site or web application that adapts to the device consuming the content, whether the user is browsing with a mouse, a pen, or a finger.

The following example will make a specific class larger if a pointing device with limited accuracy is present.

@media (pointer: coarse) {
   .button {
      min-width: 100px;
      min-height: 50px;
   }
}

The following example hides a specific class if the primary pointing device cannot hover, like a finger on a smartphone.

@media (hover:none) {
   .menu {
      display: none;
   }
}

Media query listeners

Media query listeners enable two new capabilities, described later in this topic:

Evaluating a media query at runtime using JavaScript
Subscribing listeners to changes in the media query's evaluation

Creating a media query listener

To evaluate a media query at run time, an MediaQueryList object is created using the new window method, matchMedia.

Method	Description
matchMedia(sList)	Accepts a string that contains one or more media queries, and returns an MediaQueryList object.

The matchMedia method accepts a media query string and returns a MediaQueryList object. The following example creates a media query that checks whether the width or height of a window is less than a certain size.

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

The MediaQueryList object provides the following properties.

Property	Description
matches	Returns "true" if the list of media queries matches the state of the current window; returns "false" otherwise.
media	Returns the serialized version of the media query list, which was used to create the MediaQueryList object.

The MediaQueryList object provides the following methods.

Method	Description
addListener(callback)	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(callback)	Removes the given callback function from the list of listeners for this MediaQueryList object.

The matches property is a Boolean value that returns an evaluation of the media query. Using the example above, matches returns true if the window's width is greater than or equal to the minimum that has been specified.

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

Subscribing media query listeners

To detect media query changes, you can subscribe a listener to a MediaQueryList object. The addListener method takes a callback function, and invokes it when the media query changes evaluation. Using the previous media query, the following example subscribes to changes in the 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.
  }
}

The listener invokes the callback function whenever the state of the media actually changes. If the window is resized to be narrower than the specified minwidth attribute value, the callback function is invoked. It is invoked again when the window becomes wider than our min-width. The MediaQueryList object is passed as a parameter to the callback function.