HTML Guide for device-pixel-ratio
Replace device-based media features with viewport-based features; use max-width instead of max-device-width.
max-device-width and min-device-width were removed from modern media queries because they target physical device dimensions, not the browser viewport. They fail on high‑DPI screens, resizable windows, and zoom scenarios. Use viewport-relative features like width, min-width, and max-width, which respond to the layout viewport and are supported across browsers. For device pixel density, prefer resolution (e.g., min-resolution: 2dppx) instead of -webkit-min-device-pixel-ratio. Keep breakpoints content-driven; pick sizes where your layout needs to adapt, not specific devices.
HTML Examples
Example causing the validator warning
<!doctype html>
<html lang="en">
<head>
<title>Deprecated Media Feature</title>
<style>
/* Deprecated: targets device width, not viewport */
@media only screen and (max-device-width: 480px) {
body {
background: pink;
}
}
</style>
</head>
<body>
<p>Deprecated media feature example.</p>
</body>
</html>Fixed example using viewport-based queries
<!doctype html>
<html lang="en">
<head>
<title>Viewport-Based Media Query</title>
<style>
/* Recommended: respond to viewport width */
@media (max-width: 480px) {
body {
background: pink;
}
}
/* Optional: high-DPI tweak using resolution */
@media (min-width: 481px) and (min-resolution: 2dppx) {
body {
background: lightblue;
}
}
</style>
</head>
<body>
<p>Fixed media feature example.</p>
</body>
</html>