The issue at hand is interconnected with the emergence of Apple's Retina displays, which boast a significantly higher pixel density compared to previous screens. Despite this advancement, the browser continues to function as though it operates with the same number of pixels.
For example, while the iPhone 3GS featured a display resolution of 320 x 480 pixels, the subsequent release of the iPhone 4 introduced a display resolution of 640 x 960 pixels. However, rather than adapting websites to fit this increased resolution, the browser persisted in presenting content as if operating at 320 x 480 pixels.
This discrepancy led to the development of CSS-pixels. When setting an element's width:100px in CSS, it equates to 100 physical pixels on a standard display but corresponds to 200 physical pixels on a retina display. While both the iPhone 3GS and iPhone 4 exhibit the same dpi (attributed to pretend CSS-pixels), they differ vastly in terms of dppx (which reflects actual physical pixels).
By leveraging dppx, developers can identify users with high pixel density screens and apply distinct styles accordingly, despite the browser pretending otherwise about the device's pixel density.
.comp {
background-image: url(image.png);
}
@media only screen and (min-resolution: 2dppx) {
.comp {
background-image: url(<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a73777b7d7d5a2862346a747d">[email protected]</a>);
}
}
For further insights into CSS-pixels, visit: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution