Testing media queries

  • Revision slug: DOM/Using_media_queries_from_code
  • Revision title: Using media queries from code
  • Revision id: 37446
  • Created:
  • Creator: yyss
  • Is current revision? No
  • Comment 18 words added

Revision Content

The DOM provides features that make it possible to test the results of a media query programmatically. This is done using the {{ domxref("MediaQueryList") }} interface and its methods and properties. Once you've created a {{ domxref("MediaQueryList") }} object, you can check the result of the query or, alternatively, receive notifications automatically when the result changes.

Note: This article covers a feature whose specification is still in draft state; it's possible that the implementation may change.

Creating a media query list

Before you can evaluate the results of a query, you need to create the {{ domxref("MediaQueryList") }} object representing the media query. To do this, use the {{ domxref("window.matchMedia") }} method.

For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:

var mql = window.matchMedia("(orientation: portrait)");

Checking the result of a query

Once your media query list has been created, you can check the result of the query by looking at the value of its matches property, which reflects the result of the query:

if (mql.matches) {
  /* The device is currently in portrait orientation */
} else {
  /* The device is currently in landscape orientation */
}

Receiving query notifications

If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the addListener() method on the {{ domxref("MediaQueryList") }} object, specifying an observer that implements the {{ domxref("MediaQueryListListener") }} interface:

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

This code creates the orientation testing media query list, mql, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).

The handleOrientationChange() method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:

function handleOrientationChange(mql) {
  if (mql.matches) {
    /* The device is currently in portrait orientation */
  } else {
    /* The device is currently in landscape orientation */
  }
}

Ending query notifications

When you no longer need to receive notifications about changes to the value of your media query, you can simply call removeListener() on the {{ domxref("MediaQueryList") }}:

mql.removeListener(handleOrientationChange);

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 9 {{ CompatGeckoDesktop("6.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • Media queries
  • {{ domxref("window.matchMedia()") }}
  • {{ domxref("MediaQueryList") }}
  • {{ domxref("MediaQueryListListener") }}

{{ languages( { "ja": "ja/CSS/Using_media_queries_from_code"} ) }}

Revision Source

<p>The DOM provides features that make it possible to test the results of a media query programmatically. This is done using the {{ domxref("MediaQueryList") }} interface and its methods and properties. Once you've created a {{ domxref("MediaQueryList") }} object, you can check the result of the query or, alternatively, receive notifications automatically when the result changes.</p>
<div class="note"><strong>Note:</strong> This article covers a feature whose specification is still in draft state; it's possible that the implementation may change.</div>
<h2>Creating a media query list</h2>
<p>Before you can evaluate the results of a query, you need to create the {{ domxref("MediaQueryList") }} object representing the media query. To do this, use the {{ domxref("window.matchMedia") }} method.</p>
<p>For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:</p>
<pre>var mql = window.matchMedia("(orientation: portrait)");
</pre>
<h2>Checking the result of a query</h2>
<p>Once your media query list has been created, you can check the result of the query by looking at the value of its <code>matches</code> property, which reflects the result of the query:</p>
<pre class="brush: js">if (mql.matches) {
  /* The device is currently in portrait orientation */
} else {
  /* The device is currently in landscape orientation */
}
</pre>
<h2>Receiving query notifications</h2>
<p>If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the <code>addListener()</code> method on the {{ domxref("MediaQueryList") }} object, specifying an observer that implements the {{ domxref("MediaQueryListListener") }} interface:</p>
<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql); 
</pre>
<p>This code creates the orientation testing media query list, <code>mql</code>, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).</p>
<p>The <code>handleOrientationChange()</code> method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:</p>
<pre class="brush: js">function handleOrientationChange(mql) {
  if (mql.matches) {
    /* The device is currently in portrait orientation */
  } else {
    /* The device is currently in landscape orientation */
  }
}
</pre>
<h2>Ending query notifications</h2>
<p>When you no longer need to receive notifications about changes to the value of your media query, you can simply call <code>removeListener()</code> on the {{ domxref("MediaQueryList") }}:</p>
<pre>mql.removeListener(handleOrientationChange);
</pre>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>9</td> <td>{{ CompatGeckoDesktop("6.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<h2>See also</h2>
<ul> <li><a href="/En/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li> <li>{{ domxref("window.matchMedia()") }}</li> <li>{{ domxref("MediaQueryList") }}</li> <li>{{ domxref("MediaQueryListListener") }}</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/Using_media_queries_from_code"} ) }}</p>
Revert to this revision