-moz-device-pixel-ratio CSS media feature
Deprecated
Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The -moz-device-pixel-ratio Gecko-only CSS media feature can be used to apply styles based on the number of device pixels per CSS pixel.
Warning:
Do not use this feature. Use the resolution feature with the dppx unit instead.
Note:
This media feature is also implemented by WebKit as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by WebKit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.
Syntax
<number>-
The number of device pixels per CSS pixel.
Media: @media
Accepts min/max prefixes: yes
Examples
Basic compatibility example
-moz-device-pixel-ratio may be used for compatibility with Firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with WebKit-based browsers that do not support dppx.
Example:
/* First, set for WebKit-based browsers */
@media (-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2) /* Older Firefox browsers (prior to firefox 16) */,
(min-resolution: 2dppx) /* The standard way */,
(min-resolution: 192dpi); /* dppx fallback */
Note:
See this CSSWG article for compatibility good practices regarding resolution and dppx.
Specifications
Not part of any standard.