JSFiddle - React, Tailwind, and code Playground

DPI detection with @media

by nilloc

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution -->

<p>This is a test of your device's pixel density.</p>

CSS

p::after{
  display:block;
}

/* Exact resolution */
@media (resolution: 150dpi) {
  p {
    color: red;
  }
  p::after{
    content:"150dpi exactly";
  }
}

/* Minimum resolution */
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
  p::after{
    content:"\a at least 72dpi";
  }
}

@media (min-resolution: 160dpi) {
  p {
    background: teal;
    color:white;
  }
  p::after{
    content:"at least 160dpi";
  }
}

/* Maximum resolution */
@media (min-resolution: 200dpi) {
  p {
    background: yellow;
  }
  p::after{
    content:"at least 200dpi";
  }
}