# 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?

• Commented Jul 29, 2019 at 9:03
• Are you sure this is a density problem and not something that could be solved with deltaTime ? I'm asking because I've encountered a similar issue in the past using javascript and Pixi. Commented Jul 29, 2019 at 13:28

1. have access to the viewport-percentage units like vmin, vmax, vw, vh. Why not use them?
3. Why not use meta tag to adjust the size of your page in logical pixels for mobile devices?