strues / retinajs

JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants

Home Page:http://retinajs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Windows and chrome on 4k monitor yields 1.5x resolution

ddaeschler opened this issue · comments

Using a 4k monitor and chrome on windows, retinajs attemptes to load images with @1.5x appended rather than an integer value like @2x.

By quick source inspection, I think this means window.devicePixelRatio is returning 1.5.

In this case, a simple change of:

const environment = hasWindow ? (window.devicePixelRatio || 1) : 1;
to
const environment = hasWindow ? Math.ceil(window.devicePixelRatio || 1) : 1;

Would fix the problem

For reference, this behavior was seen on a Dell P2715Q 27-Inch 4k monitor

Agreed. I actually noticed this by chance, seeing some rather odd 404s for images which retina.js was looking for because of a non-integer window.devicePixelRatio. I've no idea what device they were caused by, but there's no way I'm going to cater for this kind of request (these are real)...

/i/jwflogo@1.149999976158142x.png
/i/jwflogo@1.0499999523162841x.png
/i/jwflogo@1.25x.png

If we need to cater for rational number devicePixelRatios, these would surely have to be defined as a finite list at initialisation.

(retina.js v2.0.0)

For me, Chrome on Windows 10 uses Windows scaling ratio. For example I use 1.5 (150%) so browser identifies my resolution as 2560x1440, but I have 4K monitor with resolution 3840x2160. I have tried retina.js 2.1.0 but it did not work at all (seems to be already reported) and with retina.js 2.0.0 I got request from server for @1.5x picture. Seems to be right, but I don't want to have extra image for 1.5 ratio.

Not sure if this is an issue, looks like a feature. But I would prefer having 3 images on server (original, 2x and 3x) and not for (+1.5x).

Maybe someone has a solution how to set ratios to be "integer" instead of "float"?