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?

  • \$\begingroup\$ Related stackoverflow.com/a/23606369/4934560 \$\endgroup\$
    – Bálint
    Commented Jul 29, 2019 at 9:03
  • \$\begingroup\$ 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. \$\endgroup\$ Commented Jul 29, 2019 at 13:28

1 Answer 1


Are you sure you need to go as deep as to device pixel ratio?

If it's a browser-based game, then you

  1. have access to the viewport-percentage units like vmin, vmax, vw, vh. Why not use them?
  2. If you are using canvas to render output, why not stylize it to fit entire viewport while maintaining the same pixel dimension?
  3. Why not use meta tag to adjust the size of your page in logical pixels for mobile devices?
  • \$\begingroup\$ Yes, this is a browser-based game, but all I can use is the canvas. So any features that canvas supports are ok. I cannot create/modify anything else outside given canvas object. \$\endgroup\$
    – igobivo
    Commented Aug 2, 2019 at 9:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .