Device media queries
The device-aspect-ratio, device-height, and device-width media features describe physical properties of the displaying output device.
Overview
The device-aspect-ratio, device-height, and device-width media features describe physical properties of the displaying 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 |
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.
Related links
Powered by web-features