I'm in the process of creating background image selection statements in my WordPress theme's (Avada v7.4.1) child theme external style.css stylesheet. The CSS @media resolution feature is described by MDN Web Docs as a "value representing the pixel density of the output device." Is the "pixel density of the output device" the browser viewport pixel density or the native pixel density of the device's display screen?
For example, on a 3840 x 2160 4K UHD desktop monitor, the monitor's native Device Pixel Density ("DPR") is 1.0 when Windows 10 display scaling is set to 100%; the JavaScript variable window.devicePixelDensity returns 1.0, which is expected. When Windows 10 display scaling is set to 175% (which is what I have done), the JavaScript variable window.devicePixelDensity returns 1.75, which is also expected. Is the @media resolution dppx value in this example 1.0 (the display screen's native DPR) or 1.75 (the browser viewport's DPR)?