Developer forum

Forum » CMS - Standard features » Retina screen detection

Retina screen detection

Adrian Ursu Dynamicweb Employee
Adrian Ursu
Reply

Hi Guys,

Is there any method of detecting if the visitor has a retina display?

That's obviously for loading different images according to each screen size.

Thank you,

Adrian 


Replies

 
Nicolai Pedersen
Reply

Hi Adrian

Retina is an Apple brand specific thing and can be different depending on the age of the Apple device - you probably want to take a look at "pixel density" or "pixel ratio" that covers any type of device, new or old, Apple or not. Try having a look at this page: http://dpi.lv/

You cannot detect it serverside (only by best guessing) - but you can do it using JS or CSS media queries, i.e. https://css-tricks.com/snippets/css/retina-display-media-query/

BR Nicolai

 
Adrian Ursu Dynamicweb Employee
Adrian Ursu
Reply

Hi Nicolai,

I though we already had something in DW that tells if the device is tablet or mobile and I imagined it would be something like that.

In the end, I believe it's a matter of resolution. If you can detect it for Statistics, the information might be available for that tag as well.

I could use a server side information because I wanted to load only relevant resources.

Thanks,

Adrian

 
Nicolai Pedersen
Reply

Hi Adrian

We have that - that is done by looking at the user agent string and some other properties. Detecting the actual pixel ratio is a bit more complicated.

I've seen solutions where the frontend detects the ratio, sets a cookie and reloads the page - all using JS. That way the information is available serverside.

 
Nicolai Pedersen
Reply

Hi Adrian

By the way - this is a more modern approach of handling images for high density screens: https://developers.google.com/web/fundamentals/design-and-ui/media/images

This will also enable you to use different image versions using GetImage in the client markup only.

 
Adrian Ursu Dynamicweb Employee
Adrian Ursu
Reply

Hi Nicolai,

Thank you very much for theinfo. Very useful.
We have considered the picture element but it's not supported by IE11. We have a few outlaws that are still using it.

But this approach should work very well on the long run.

Speaking of images and resizing. I know we have touched this subject briefly in some other conversation or in a feature request.

Have you considered including another Crop option (or another method) for the resize that will actually create an image of a specific size and fill the surroundings with a solid color in case the aspect ratio is different? I have tried all the usual crop scenarios but I can never create an image with a specific size without deforming the image. It's basically a combination of "fit" and "canvas size" or "crop" and "Canvas size". I believe ImageGlue already supports those actions.

Thank you,

Adrian

 

 

 

You must be logged in to post in the forum