Media Query Filtering

@media CSS rules with media queries that never match in a certain client can be filtered. In order to decide this, the media features (and their specified values) are compared with the Delivery Context.

Configuration

Enable media query filtering by enabling the setting in conf/config.xml:

<config>
  <acceleration>
    <filter-media-queries [ desktop=" true | false " ] />
  </acceleration>
</config>

Only media queries for non desktop clients are filtered by default. To enable filtering of media queries even for desktop clients, the desktop setting must be set to true. The default value of desktop is false.

Supported Media Features

The following media features can be filtered by FIT:

  • width
  • resolution
  • [-CSS prefix-]device-pixel-ratio
  • [-CSS prefix-]transform-2d
  • [-CSS prefix-]transform-3d
  • [-CSS prefix-]transition
  • [-CSS prefix-]animation

Where applicable the optional min- and max- prefixes are also supported. For some media features an optional CSS prefix is also supported (e.g. -webkit-transform-3d).

For transform-2d, transform-3d, transition and animation only the -webkit- prefix is supported.

Queries using width are only filtered if the necessary viewport dimensions are detected. Queries using device-pixel-ratio or resolution are only filtered if the device pixel ratio is detected.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>MQ Example</title>
    <style>
@media screen and (min-width: 320px) {
  #min-width-320px {
    color: #0a0;
  }
}
@media screen and (min-width: 600px) {
  #min-width-600px {
    color: #0a0;
  }
}
@media screen and (max-width: 480px) {
  #max-width-480px {
    color: #0a0;
  }
}
@media screen and (min-resolution: 1dppx) {
  #resolution-1dppx {
    color: #0a0;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 1) {
  #webkit-min-device-pixel-ratio-1 {
    color: #0a0;
  }
}
@media screen and (min-resolution: 2dppx) {
  #resolution-2dppx {
    color: #0a0;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  #webkit-min-device-pixel-ratio-2 {
    color: #0a0;
  }
}
@media screen and (min-resolution: 3dppx) {
  #resolution-3dppx {
    color: #0a0;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  #webkit-min-device-pixel-ratio-3 {
    color: #0a0;
  }
}
@media screen and (transform-2d) {
  #transform-2d {
    color: #0a0;
  }
}
@media screen and (-webkit-transform-2d) {
  #webkit-transform-2d {
    color: #0a0;
  }
}
@media screen and (transform-3d) {
  #transform-3d {
    color: #0a0;
  }
}
@media screen and (-webkit-transform-3d) {
  #webkit-transform-3d {
    color: #0a0;
  }
}
@media screen and (transition) {
  #transition {
    color: #0a0;
  }
}
@media screen and (-webkit-transition) {
  #webkit-transition {
    color: #0a0;
  }
}
@media screen and (animation) {
  #animation {
    color: #0a0;
  }
}
@media screen and (-webkit-animation) {
  #webkit-animation {
    color: #0a0;
  }
}
    </style>
  </head>
  <body>
    <p id="min-width-320px">min-width: 320px</p>
    <p id="min-width-600px">min-width: 600px</p>
    <p id="max-width-480px">max-width: 480px</p>
    <p id="resolution-1dppx">resolution: 1dppx</p>
    <p id="webkit-min-device-pixel-ratio-1">-webkit-min-device-pixel-ratio: 1</p>
    <p id="resolution-2dppx">resolution: 2dppx</p>
    <p id="webkit-min-device-pixel-ratio-2">-webkit-min-device-pixel-ratio: 2</p>
    <p id="resolution-3dppx">resolution: 3dppx</p>
    <p id="webkit-min-device-pixel-ratio-3">-webkit-min-device-pixel-ratio: 3</p>
    <p id="transform-2d">transform-2d</p>
    <p id="webkit-transform-2d">-webkit-transform-2d</p>
    <p id="transform-3d">transform-3d</p>
    <p id="webkit-transform-3d">-webkit-transform-3d</p>
    <p id="transition">transition</p>
    <p id="webkit-transition">-webkit-transition</p>
    <p id="animation">animation</p>
    <p id="webkit-animation">-webkit-animation</p>
  </body>
</html>

With Mobile Safari 9 on iOS 9 on an iPod 5th generation, at least the rules

@media screen and (min-width: 600px) {
  #min-width-600px { color: #0a0; }
}

and

@media screen and (min-resolution: 3dppx) {
  #resolution-3dppi { color: #0a0; }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  #webkit-min-device-pixel-ratio-3 { color: #0a0; }
}

should be filtered.

Debugging

The media query filter logs which media queries are filtered and which are not filtered in the mqfilter debug channel.