HTML Guides for min-device-width

The device-width, device-height, and device-aspect-ratio media features (including their min- and max- prefixed variants) refer to the physical dimensions of the entire screen, not the available space where your content is actually rendered. This distinction matters because the viewport size — the area your page occupies — can differ significantly from the full device screen size. For example, a browser window might not be maximized, or browser chrome might consume screen real estate. Using device-based queries means your responsive breakpoints may not match what users actually see.

These features were also commonly used as a proxy for detecting mobile devices, but this approach is unreliable. A small-screened laptop and a large tablet can have similar device widths, making device-based detection a poor heuristic. The W3C deprecated these features and recommends using viewport-based alternatives that more accurately reflect the rendering context of your document.

Beyond standards compliance, using deprecated media features can cause issues with future browser support. While current browsers still recognize them, there is no guarantee they will continue to do so. Replacing them now ensures your stylesheets remain functional and forward-compatible.

How to fix it

Replace each deprecated device-* media feature with its viewport-based equivalent:

The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any). This is almost always the value you actually want when building responsive layouts.

Examples

Incorrect: using deprecated min-device-width

This triggers the validation error because min-device-width is deprecated:

<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="tablet.css">

Correct: using min-width instead

Replace min-device-width with min-width to query the viewport width:

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="tablet.css">

Incorrect: using max-device-width for a mobile breakpoint

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="mobile.css">

Correct: using max-width

<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css">

Incorrect: using device-aspect-ratio

<link rel="stylesheet" media="screen and (device-aspect-ratio: 16/9)" href="widescreen.css">

Correct: using aspect-ratio

<link rel="stylesheet" media="screen and (aspect-ratio: 16/9)" href="widescreen.css">

Incorrect: combining multiple deprecated features

<link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="tablet.css">

Correct: using viewport-based equivalents

<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)" href="tablet.css">

The same replacements apply when these deprecated features appear in CSS @media rules or in the media attribute on <style> and <source> elements. Updating them across your entire codebase ensures consistent, standards-compliant responsive behavior.

The min-device-width and max-device-width media features were originally designed to query the physical screen dimensions of a device. However, these features have been deprecated in Media Queries Level 4 and Level 5 because they are unreliable in modern browsing contexts. The physical screen size is a poor proxy for the actual available layout space — it doesn’t account for browser chrome, split-screen modes, zoom levels, or the fact that many modern devices report abstract pixel values that don’t correspond to physical hardware pixels in a straightforward way.

The viewport-based alternatives — min-width and max-width — respond to the layout viewport, which is the actual space your content is rendered into. This makes them far more useful for responsive design. When a user zooms in, the layout viewport shrinks, and min-width/max-width queries respond accordingly. With min-device-width, zooming has no effect on the query result, which can lead to layouts that don’t adapt when they should.

Beyond practical concerns, using deprecated features means your CSS may behave inconsistently across browsers in the future, as support could be removed entirely. Validators flag this to encourage migration to the modern, standards-compliant approach.

How to fix it

The fix is a straightforward replacement:

• min-device-width → min-width
• max-device-width → max-width

If your original query also included the screen keyword solely to pair with device-width targeting, you can safely drop it — min-width and max-width apply across all media types and the screen qualifier is rarely necessary in modern CSS.

If you were using min-device-width to detect high-density or Retina displays (a common pattern in older code), the correct modern approach is to use the resolution media feature instead, such as min-resolution: 2dppx.

Examples

Deprecated usage (triggers warning)

<!doctype html>
<html lang="en">
<head>
  <title>Deprecated media feature</title>
  <style>
    @media screen and (min-device-width: 768px) {
      .sidebar { display: block; }
    }

    @media screen and (max-device-width: 480px) {
      .sidebar { display: none; }
    }
  </style>
</head>
<body>
  <aside class="sidebar">Sidebar content</aside>
</body>
</html>

Both min-device-width and max-device-width are deprecated and will produce validation warnings.

Fixed example using viewport-based queries

<!doctype html>
<html lang="en">
<head>
  <title>Viewport-based media queries</title>
  <style>
    @media (min-width: 768px) {
      .sidebar { display: block; }
    }

    @media (max-width: 480px) {
      .sidebar { display: none; }
    }
  </style>
</head>
<body>
  <aside class="sidebar">Sidebar content</aside>
</body>
</html>

Replacing device-width with resolution for pixel density

Older code sometimes used min-device-width in combination with -webkit-min-device-pixel-ratio to target high-density screens. The modern equivalent uses the resolution media feature:

<!doctype html>
<html lang="en">
<head>
  <title>Resolution media query</title>
  <style>
    /* Deprecated approach */
    /*
    @media screen and (min-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
      .hero { background-image: url("hero@2x.jpg"); }
    }
    */

    /* Modern approach */
    @media (min-width: 768px) and (min-resolution: 2dppx) {
      .hero { background-image: url("hero@2x.jpg"); }
    }
  </style>
</head>
<body>
  <div class="hero">Hero section</div>
</body>
</html>

The min-resolution: 2dppx query cleanly replaces vendor-prefixed pixel ratio queries and works alongside the standard min-width viewport query.