A Pen by Oliver Pattison.

index.html

<article>
  <h1>Trying out resolution and <code>dppx</code> media query support</h1>
  <p>This is a test of <code>dppx</code> support with CSS media queries. A user agent that has a resolution greater than 1.5x (a pixel density ratio of 1.5 or higher) will display a narrower font. <code>&lt;strong&gt;</code> styles also have to be adjusted. <strong>The following example is designed for 1.5x screens</strong>, but could work for any values.</p>
  <h2>The values</h2>
  <p><code>dppx</code> (dots per pixel) and <code>dpi</code> (dots per inch) are weird numbers, even if you are used to thinking about screens and their pixels. CSS has an odd resolution scale of 96dpi – and 1dppx is 96dpi. So 192dpi (2x pixel ratio) is 2dppx and 144dpi (1.5x pixel ratio) is 1.5dppx. <code>dppx</code> only refers to pixel ratio (physical pixels per viewport pixel), not to PPI (physical pixels per inch). Neither does DPI refer to PPI, even though those terms are used synonymously outside this particular CSS context. That is: it’s not really about pixels – it’s about the viewport.</p>
  <p>These various numbers make for odd math. It would be a lot easier to just use <code>dppx</code> for the media query, but some browsers (including Safari and mobile Safari!) haven’t entered the future yet.</p>
  <h2>The CSS</h2>
  <pre><code>@media screen and (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) { }</pre></code>
  <p>144dpi is 1.5 times 96dpi (“standard” screen DPI). This is not the actual PPI (pixels-per-inch) measurement for a display. A Retina MacBook Pro 15 inch has a real PPI of about 220 (192dpi, 2dppx). An iPhone 5S has a real PPI of about 326 PPI (192dpi, 1.5dppx). These displays are very different, but do share a common pixel density ratio of 2x (two physical pixels per inch), which is what this media query targets. DPI in this case is fiction rather than a real measurement. 96dpi = 1x pixel density ratio.</p>
  <h2>Prescribing use</h2>
  <p>Should “retina” and other high density displays have <em>thinner font weights</em> when they can render them more accurately than other screens? Should screens with lower densities have <em>thicker font weights</em> by default? Background images in CSS might be a better use of this media query.</p>
  <p>Works in Safari 8, Chrome 38 and Firefox 32. ≥IE9 should work (with <code>dpi</code> declared), but I haven’t tested it. Basically, if it is Chrome, Firefox, new IE, and you don’t mind prefixing for WebKit, resolution media queries work.</p>
  <h2>References</h2>
  <ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resolution"><code>resolution</code> documentation in MDN</a></li>
    <li><a href="http://www.w3.org/TR/css3-mediaqueries/#resolution">The Media Queries specification</a></li>
    <li><a href="http://caniuse.com/#feat=css-media-resolution">Can I Use? support (not universal, but decent enough with fallbacks outlined here)</a></li>
    <li><a href="http://mediaqueriestest.com">CSS Media Queries Test – see how your browser handles it</a></li>
    <li><a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">How to unprefix -webkit-device-pixel-ratio – CSS WG</a></li>
  </ul>
</article>

style.css

html {
  font-family: 'Helvetica Neue', Helvetica, Arial;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.375;
}

strong {
  font-weight: 600;
}

h1 {
  font: 600 1.625rem/1.25 'Helvetica Neue', Helvetica, Arial;
}

h2 {
  font: 600 1.375rem/1.25 'Helvetica Neue', Helvetica, Arial;
}


@media screen and (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
  
  html {
    font-weight: 300;
  }
  
  strong,
  h1,
  h2 {
    font-weight: 500;
  }
  
}

/* … */

article {
  background: whitesmoke;
  padding: 1em 2em;
}

pre {
  background: dimgray;
  color: white;
  font-size: 1em;
  margin: 1em -2em;
  padding: 1em 2em;
  white-space: pre-wrap;
}

@media screen and (min-width: 50em) {
  
  article {
    margin: 1em auto;
    width: 40em;
  }

}

Trying-out-resolution-and-dppx-media-query-support.markdown

Trying out resolution and dppx media query support

A test of dppx support with CSS media queries. A user agent that has a resolution greater than 1.5dppx (a pixel density ratio of 1.5 or higher) will display a narrower font.

A Pen by Oliver Pattison on CodePen.

License.