Detecting retina displays

Was just reading up on how to detect retina (HiDPI) displays and I am trying this out on this post.

For you nerds, I added a javascript function to my blog's CSS that looks like: <script type='text/javascript'> var retina = window.devicePixelRatio > 1 ? true : false; </script> Then in the post's body I use a statement like <p id="wavesimage"></p> <SCRIPT type="text/javascript"> if (retina) { var sandhtml = '<a href="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/Great-Sand-Dunes-National-Park/5800393_KkCSbn#!i=1545566790&k=r6gmsz3&lb=1&s=A" title="Waves"><img src="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/Great-Sand-Dunes-National-Park/i-r6gmsz3/0/798x1200/DSC0869-798x1200.jpg" width=399 height=600 title="Waves" alt="Waves"></a>'; } else { var sandhtml = '<a href="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/Great-Sand-Dunes-National-Park/5800393_KkCSbn#!i=1545566790&k=r6gmsz3&lb=1&s=A" title="Waves"><img src="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/Great-Sand-Dunes-National-Park/i-r6gmsz3/0/L/DSC0869-L.jpg" title="Waves" alt="Waves"></a>'; } document.getElementById("wavesimage").innerHTML=sandhtml; </SCRIPT> This post was inspired by what I read here. It seems to work. This is becoming more and more relevant with all the high res displays on mobile platforms as well as the retina displays that Apple is pushing.