text look the same in all mobile devices

Hey all,

I’m working on a responsive game in Phaser 3 at the moment, and I’m trying to work out a way to have the text look the same in all mobile devices without it overflowing.

Is there any way to auto-size the text so that it fits inside the allocated space.

Any suggestion/references regarding this would be really helpful.

Thanks in advanced.


There is wordWrap width in the text style.

Or you can do

text.displayWidth = AVAIL_WIDTH;
text.scaleY = text.scaleX;

Hi samme,

Thanks for the response.

I have used wordwrap to fit the width, but the problem i’m encountering is with respect to font size (px).
When i test it out in a webview it looks fine, but when i run the same game on a different mobile phone, the text looks bigger.

Please find attached references to photos taken from 2 different devices.
Is there any way auto size the font size so that the text looks the same in all devices.

First verify whether the available width is the same on both devices.

Try passing fixedWidth in the text style.

Try passing textMetrics in the text style.

should i use rem for fontSize?

this.add.text(0, 0, ‘wow’, { fontSize: ‘xrem’ })

No, fontSize is a number (pixels implied).