# CSS: Deprecated media feature “max-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.
> Canonical HTML version: https://rocketvalidator.com/html-validation/css-deprecated-media-feature-max-device-width-for-guidance-see-the-deprecated-media-features-section-in-the-current-media-queries-specification
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `device-width` and `device-height` media features (including their `min-` and `max-` prefixed versions) were originally designed to query the physical dimensions of a device's screen. In practice, this caused significant problems. On high-DPI (Retina) displays, `max-device-width` could report unexpected values depending on the device pixel ratio. When users resized their browser window, these features didn't respond because the physical screen size never changed. And with browser zoom, the layout could break because the query still referenced the fixed device dimensions rather than the actual available space.
The [Media Queries Level 4 specification](https://www.w3.org/TR/mediaqueries-4/#mf-deprecated) formally deprecated these features. Modern browsers still support them for backward compatibility, but they should not be used in new code. The W3C validator raises this warning to encourage migration to the current standard.
The viewport-based equivalents — `width`, `min-width`, and `max-width` — respond to the browser's layout viewport. This means they correctly adapt when the user resizes the window, zooms the page, or views the page in a split-screen mode. They also behave consistently across devices regardless of pixel density.
If your existing code uses `max-device-width` or `min-device-width`, the fix is straightforward: drop the word `device` from the feature name. For example, `max-device-width: 768px` becomes `max-width: 768px`. If you were relying on device dimensions to detect high-DPI screens, use the `resolution` media feature instead (e.g., `min-resolution: 2dppx`), which is the standards-compliant replacement for vendor-prefixed features like `-webkit-min-device-pixel-ratio`.
When choosing breakpoint values, prefer content-driven breakpoints — values where your layout actually needs to adapt — rather than targeting specific device widths. This produces more resilient designs that work well on any screen size.
## Examples
### Deprecated usage triggering the warning
The `max-device-width` media feature in the `
This page uses a deprecated media feature.