Device media queries
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Note: To query for the aspect ratio of the viewport, developers should use the aspect-ratio media feature instead.
The device-aspect-ratio CSS media feature can be used to test the width-to-height aspect ratio of an output device.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.at-rules.media.device-aspect-ratio Deprecated | 1 | 12 | 2 | 3 | 18 | 1 |
| CSS at-rule | ||||||
device-height Deprecated The device-height CSS media feature can be used to test the height of an output device's rendering surface. | 1 | 12 | 2 | 3 | 18 | 1 |
device-width Deprecated The device-width CSS media feature can be used to test the width of an output device's rendering surface. | 1 | 12 | 2 | 3 | 18 | 1 |
Syntax
/* Deprecated - use width/height */
@media (device-width: 375px) {
body { font-size: 14px; }
}
/* Recommended */
@media (max-width: 375px) {
body { font-size: 14px; }
}Live demo
Use cases
-
Adaptive styling
Use Device media queries to tailor layout or presentation to device features and user settings.
-
Progressive enhancement
Keep the default experience solid, then layer in device-specific or preference-aware improvements.
Cautions
- Do not rely on a media condition as the only path to essential functionality.
- Document the breakpoint or environment strategy so conditions stay consistent across the codebase.
Accessibility
- Media-query adaptations should preserve keyboard access, reading order, and touch usability.
- Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.