HTML Guides for media query

The device-width and device-height media features (along with their min- and max- prefixed variants) originally referred to the physical dimensions of the device’s entire screen, regardless of how much space was actually available to the document. In practice, this distinction caused confusion and inconsistent behavior across browsers. On most modern devices and browsers, device-width and width return the same value anyway, making the device-* variants redundant.

The device-* media features were frequently used as a proxy to detect mobile devices, but this was never a reliable approach. A narrow browser window on a desktop monitor would not trigger a max-device-width query even though the available layout space was small. Conversely, modern phones and tablets with high-resolution screens can report large device widths that don’t reflect the actual CSS viewport size. The viewport-based alternatives (width, height, aspect-ratio) more accurately represent the space available for rendering your content.

Using deprecated media features causes W3C validation warnings and may eventually lose browser support entirely. Replacing them ensures your stylesheets are future-proof, standards-compliant, and behave consistently across all devices and window sizes.

How to fix it

Replace any device-width, device-height, or device-aspect-ratio media feature (including min- and max- prefixed versions) with the corresponding viewport-based equivalent:

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

Examples

Incorrect: using deprecated max-device-width

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

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

Correct: using max-width instead

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

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

Incorrect: using deprecated min-device-width in a range

<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">

Incorrect: using deprecated 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">

Applying the same fix in CSS @media rules

The same deprecation applies to @media rules inside stylesheets. While the W3C validator specifically flags the media attribute on <link> elements, you should update your CSS as well:

/* Deprecated */
@media only screen and (max-device-width: 768px) {
  .sidebar { display: none; }
}

/* Correct */
@media only screen and (max-width: 768px) {
  .sidebar { display: none; }
}

If your site relies on a <meta name="viewport"> tag (as most responsive sites do), the viewport width already matches the device’s CSS pixel width, so switching from device-width to width will produce identical results in virtually all cases.

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.