Home / Article / Unity WebGL and Retina Display Devices

Unity WebGL and Retina Display Devices


In this article, let’s see a simple solution for running a Unity WebGL project without losing quality on retina display devices.

Keep in mind that this is a workaround and not I cannot guarantee that it will work in all cases. If it doesn’t work give me a shout.

First, we need to scale the canvas size according to the device pixel ratio. On the index.html, add the following method inside the <script> tag:

Next, since the canvas size was changed we need to adjust the mouse pointer coordinates on the canvas window. Inside the build folder look for a file with the *.js (development) or *.jsgz (release) extension.

If you have a *.jsgz file you need to extract the *.js file. Rename the file to *.gz and extract using a compression tool (in this case we used Keka for Mac).

Open the file and:

  • Find e.screenX and replace by (e.screenX*devicePixelRatio)
  • Find e.screenY and replace by (e.screenY*devicePixelRatio)
  • Find e.clientX-rect.left and replace by (e.clientX-rect.left)*devicePixelRatio
  • Find e.clientY-rect.top and replace by (e.clientY-rect.top)*devicePixelRatio

If it’s a release build, you need to compress the *.js file back to *.jsgz.

And you are good to go.

Please try it and give me some feedback.

Leave a Comment

Your email address will not be published. Required fields are marked *