Device media queries
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 | |
device-aspect-ratio Deprecated | 1 | 12 | 2 | 3 | 18 | 1 |
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 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* 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.