Question

I want to redirect to a retina-optimized webpage when retina displays are detected, but not when a retina iPhone is detected. Javascript or Jquery is my first choice for doing this.

Thank you!

Was it helpful?

Solution

So, here's what I did:

if (window.matchMedia("(-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px)").matches) {location.replace("http://MY-SPECIAL-RETINA-PAGE.com") }

Now, my landing page redirects to all Retina devices except for iPhones. (I've got a lot of large photos that load into a slideshow, and while I want that high-res glory in larger Retina screens, it's not worth it to me to gain a little bit of image quality on tiny screens in exchange for making my iPhone visitors have to download those double-size jpegs for Retina quality.)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top