friendica/red — pull request #454 by chriswinstead (2014-05-10 18:42:32+00:00)
Title: Detect high-resolution displays (like retina) and serve higher resolution photo thumbnails

These are some changes that make photo display more appealing on the iPhone, iPad and other devices with high pixel-density displays. On these displays, browsers try to render images with the same relative size regardless of display type, so the 320px thumbnails get stretched to fill a 640px display area. The solution is to serve a 640px image while declaring a 320px size. To make sure this is done only on appropriate displays, I borrowed a cookie technique from another project. The cookie code is supposed to be added prior to any css, so I placed it in head.tpl. I also added "max-width: 100%" to img tags in many places, to make sure they don't flow off the screen when viewing on a phone. I've been running with these changes on my server for several days and it greatly improves the experience with photos on smartphones and tablets.