Tiny font (by default) on mobile

Authoring Twine
1

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: 2
Story Format: Harlowe 3.1

Hello all,

I am puzzled by how Twine stories look by default on mobile devices. I have an iPhone XR (1792-by-828-pixel resolution at 326 ppi) and the font looks tiny.

I tried using a CSS media query in regard to the viewport width (eg breakpoint at 1000px), but that messes up my desktop viewport as well—duh.

Am I supposed to write a media query in regard to the ppi resolution? (And how do I do that?)

I know this is more of a CSS question than a Twine question, but I’m wondering what other people do about this. What the standard approach is.

I hope there is one, as Twine games are particularly suitable for mobile devices, much more than parser-based games.

Thanks!

2

I found this post on twinery, named Harlowe CSS style: smart font size for mobile vs desktop?

Does one really have to add lines to the final HTML file?

3

For Harlowe, unfortunately, yes.

4

Better than nothing, I guess. Thanks, @TheMadExile!

5

Help me complain: https://bitbucket.org/L/harlowe/issues/151/add-meta-tag-to-head-of-templatehtml-to

1 Like