Support for HiDPI images and assets / Retina display support

Erik

Erik

Well-known member
Now that we have an actual computer out with a high density display, I would really like to see HiDPI support in the next major point release of XenForo.

XenForo already looks great on the Retina MacBook Pro due to its extensive use of CSS, but if it served HiDPI images across the entire product, it would look beautiful and truly stand apart.

I would hope for a server-side solution, as something like retina.js not only slows down page loading, but also uses far more bandwidth than necessary by loading both the normal resolution and the high-resolution image.

In fact, since XenForo seems to almost entirely use CSS background-images for UI images, including avatars, almost everything could be handled by making a slight change on the backend to generate @2x versions of every image, and then using CSS media-queries to serve the HiDPI versions to clients that support it. Like so:

Code: 
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
     /* target code here */
}
 
Upvote 15
Arty said:
Nice. I didn't look at avatars. Well done :)
Forum icons though aren't done. See folder icons and forum selection icon on screenshots below.
Click to expand...
Those actually are double the normal resolution... Hard to compare it to xenforo.com since they use different icons, but they actually are retina.. Check the RSS feed icon here vs the one on my site as an example.

The icons aren't full vector (SVG), but they are double the resolution (well really 4x since it's double on both x and y).
 
You are right. Sorry for doubting it.

I don't see how you did it. When checking on desktop browser I see 14x14 icon, on phone it is clearly higher resolution, but I can't see any code for it.
 
Arty said:
You are right. Sorry for doubting it.

I don't see how you did it. When checking on desktop browser I see 14x14 icon, on phone it is clearly higher resolution, but I can't see any code for it.
Click to expand...
It's not an ideal way of doing it... Our avatars are retina on all browsers, but icons only work as retina on all browsers except Firefox.
 
You can change icons support to client side by checking if browser supports required CSS. Then you won't have to rely on UA sniffing.

Something like this:
Code: 
(function($) {
    $(document).ready(function() 
    {
        var test = document.createElement('div');
        if (typeof test.style.zoom != 'undefined' || typeof test.style.MozTransform != 'undefined')
        {
            $('body').addClass('canZoom');
        }
        delete test;
    });
})(jQuery);
Then add .canZoom before selectors for your @2 icons and in addition to zoom:0.5; add -moz-transform:scale(0.5);
 
PHP: 
(function($) {
    $(document).ready(function()
    {
        if (window.devicePixelRatio && window.devicePixelRatio == 2)
        {
            $('body').addClass('retinaGraphics');
        }
    });
})(jQuery);
 
Really disappointed to see no mention of this in 1.2. Responsive support is great, but how hard can it be to make everything DPI-responsive as well?
 
Yeah, it's not just important for Hi-DPI laptop screens - most mobile devices which people will be using the Responsive Layout will need to display these graphics.
 
Top Bottom