HTML Guides for min-device-width
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
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:
| Deprecated feature | Replacement |
|---|---|
| device-width | width |
| min-device-width | min-width |
| max-device-width | max-width |
| device-height | height |
| min-device-height | min-height |
| max-device-height | max-height |
| device-aspect-ratio | aspect-ratio |
| min-device-aspect-ratio | min-aspect-ratio |
| max-device-aspect-ratio | max-aspect-ratio |
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.
Replace device-based media features like min-device-width with viewport-based features such as min-width.
The min-device-width and max-device-width media features are deprecated in Media Queries Level 5 and are flagged by validators. They target the physical device screen, which is unreliable across modern devices and zoom settings. Use min-width/max-width to respond to the layout viewport instead. This aligns with responsive design best practices and works consistently with zoom, orientation changes, and different device pixel ratios.
Common replacements:
- @media (min-device-width: X) → @media (min-width: X)
- @media (max-device-width: X) → @media (max-width: X)
- If you were targeting pixel density, prefer resolution (e.g., min-resolution: 2dppx) or feature queries as needed.
HTML Examples
Example causing the warning
<!doctype html>
<html lang="en">
<head>
<title>Deprecated media feature example</title>
<style>
/* Deprecated: targets physical device width */
@media screen and (min-device-width: 768px) {
.card { padding: 24px; }
}
</style>
</head>
<body>
<div class="card">Content</div>
</body>
</html>Fixed example (viewport-based)
<!doctype html>
<html lang="en">
<head>
<title>Viewport-based media queries</title>
<style>
/* Recommended: targets the layout viewport width */
@media (min-width: 768px) {
.card { padding: 24px; }
}
/* Optional: high-density displays */
@media (min-width: 768px) and (min-resolution: 2dppx) {
.card { border: 1px solid #ccc; }
}
</style>
</head>
<body>
<div class="card">Content</div>
</body>
</html>
Ready to validate your sites?
Start your free trial today.