Support for HiDPI images and assets / Retina display support

digitalpoint

Well-known member
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.
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).
 

Arty

Well-known member
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.
 

digitalpoint

Well-known member
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.
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.
 

Arty

Well-known member
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);
 

digitalpoint

Well-known member
Ya... Just wanted to do it server-side... The less JS that needs to run the better... But yeah, can definitely do it with JS too.
 

mizter1nho

Well-known member
PHP:
(function($) {
    $(document).ready(function()
    {
        if (window.devicePixelRatio && window.devicePixelRatio == 2)
        {
            $('body').addClass('retinaGraphics');
        }
    });
})(jQuery);
 

Erik

Well-known member
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?
 

DeltaHF

Well-known member
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