After learning how to display my Retina optimized logo from this tutorial (link), I encountered an issue when testing on my iPad and Samsung Galaxy Note II (using Safari, Firefox, Dolphin apps). The Retina image is showing up at its full size of 1200px x 500px without resizing.
The correct image is being displayed but it's not being resized accordingly. Despite my efforts to find a solution online, I have come up empty-handed. I am feeling frustrated and on the verge of giving up on serving Retina images for now. Does anyone have any ideas or suggestions? Thank you in advance!
<div class="logo-splash"></div>
/* CSS for devices with normal screens */
.logo-splash {
height: 250px;
background-size: 600px 250px;
background: url(images/iaay_splash_logo.png) no-repeat center center;
}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.logo-splash {
background-size: 600px 250px;
height: 250px;
background: url(images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acc5cdcdd5f3dfdcc0cddfc4f3c0c3cbc3ec9ed482dcc2cb">[email protected]</a>) no-repeat center center;
}
}