Remix.run Logo
foreigner 4 hours ago

I need a way to detect the screen DPI from the user agent, so I can return higher resolution images only to devices that can use them. I realize detecting that based on user agent may not always be accurate, but surely it could work the vast majority of the time. Does anybody know of a lib that implements that on NodeJS?

AndrewStephens 3 hours ago | parent | next [-]

Consider using the img tag’s srcset property for this purpose. It has many advantages over what you are suggesting.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageEl...

foreigner 3 hours ago | parent [-]

I didn't realize srcset could select for "pixel density", thanks for the tip!

ivan_gammel 3 hours ago | parent | prev | next [-]

Please consider taking network speed into account. The device can be great but on mobile network it may take ages to load everything, depending on the location (e.g. on a train you may not have stable 5G long enough).

ChrisMarshallNY 2 hours ago | parent [-]

This is still a consideration, and one of the reasons that having a customized server delivery is an important capability.

Responsive sites still upload the same data, but show less of it to you.

That said, if there were a way to report network connection speed to the server, it could make the decision to reduce the data load (regardless of end device).

agos 3 hours ago | parent | prev [-]

what can you say about DPI from a string like "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"? I don't think it's possible from the user agent, but it's a one liner in Javascript