Mobile emulation displays UI elements at incorrect size

As part of our latest update for Steam Age, @dr01d3k4 has taken it on to update the main menu screen to work on mobile. He owns a Pixel 2XL, a 2880×1440 screen at 538 dpi. When we put these values into the emulation in studio, this is the result:

image

The text is much too small to read, and the top bar is much too small to use with a touch input device. Fortunately, the app does not have this issue; UI elements are sized appropriately for users to read and interact with:


(don’t mind the blank background, that is due to his internet)

Placing the two images side-by-side we can see noticeable differences in the scale of the elements:

The two side bars use Scale sizes, so they are approximately the same relative size, but UI elements using Offset size (like the top bar and tools) are much, much smaller than they should be.

Expected: UI elements in emulation mode are scaled to match scaling used on the app
Observed: UI elements are not scaled to match the app

3 Likes

I should clarify: the 2 UIs are not the exact same. The in-dev one on the left has slightly changed from current production release shown in the right image, but not by enough to cause that much of a difference between the 2. The top-bar and players list alone should be enough to show the gap between the emulator and the real device.

1 Like