devicePixelRatio and set a cookie. Here is the code that I am using:
Has anyone come across a better method of doing this or have any suggestions of improving this script. This script does work, it just feels dirty.
You could use CSS3 media queries like described here, but this will only let you add additional CSS rules client-side, not adjust the image path server-side. This would work well for a site with a limited number of static images.
Brian Cray answer seems to be false.
var retina = window.devicePixelRatio && window.devicePixelRatio >= 2;
I implemented a very "low tech" solution when I needed to add support for retina display on a site: I doubled the size of all the images and set them to display at 50% their size.
Unfortunately, it meant every device was loading high resolution images even if it didn't support them, but I didn't have a lot of graphics to worry about, so it was a good solution for me.
It's this easy:
var retina = window.devicePixelRatio > 1 ? true : false;
You will need a small polyfil to reliably read the contents of noscript tags across all browsers (IE8 and below) which you can find here
©2020 All rights reserved.