0

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!

ian_6500
  • 358
  • 2
  • 10
  • 21
  • possible duplicate of [What is the best way to detect retina support on a device using JavaScript?](http://stackoverflow.com/questions/19689715/what-is-the-best-way-to-detect-retina-support-on-a-device-using-javascript) – esqew Apr 18 '14 at 22:55
  • Retina-optimized as in higher-resolution images? If so, [media queries](http://css-tricks.com/snippets/css/retina-display-media-query/) will do the job. – wavemode Apr 18 '14 at 22:56
  • I understand how to detect retina, but what I want to do is make an exception for retina iPhones. I don't want to just provide a different style sheet, I want to redirect to a different directory that has a bunch of stuff I don't want to load into a cell phone. – ian_6500 Apr 18 '14 at 23:11

1 Answers1

0

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.)

ian_6500
  • 358
  • 2
  • 10
  • 21
  • 768px being the minimum (detected) width of the Retina iPads, works in both landscape and portrait orientations. – ian_6500 Apr 19 '14 at 04:30