Same scroll speed across devices with different DPI

I am creating a simple game in JS, something like the flappy bird :) For pipe scroll, I am using a linear tween.

I noticed that the speed of the pipes are different across different smartphone screens, so the game has different difficulty.

I observed that this has to do with different screen sizes and different pixels densities.

What I did is I defined a duration per pixel, which is multiplied by the number of pixels the screen has. The duration per pixel, pixel_duration is constant.

So basically:

tween_duration = number_of_horizontal_pixels * pixel_duration

But this gives same speed in different sized browser windows on the (same) computer screen. If I use this approach on some device that has higher pixel density, the pipes will move slower, because there are more pixels, so this tween_duration value gets larger, so tween gets slower.

Then I learned of the devicePixel ratio value which can be used. So I try to factor this in the equation:

tween_duration = number_of_horizontal_pixels * pixel_duration / devicePixelRatio

This devicePixelRatio is higher as screen DPI's goes higher and should solve my problem according to the docs, right? https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

However, this only helps a bit. There is still a noticable speed difference.

Why is this not working, and how can I get the same scroll speed across devices in JS (in browser window) - perhaps some other approach would do?