Relative font size

me again ... (the more I think of my project, the more I see the barriers :joy: )

my problem is now font size : 14 is fine on the phone, but on my tablet it looks very tiny ... almost ridiculous.

I found this post, but I am not sure how to use the reference proposed by @Taifun

How can I do so that the relative space occupied by text in labels or buttons remains the same whatever the screen ?

thx :wave:

1 Like

@Taifun's reference is to an extension at puravidaapps.com

The same thread has a JavaScript solution by @Boban, which i will reproduce here for easier reference. (It needs refreshing to use a WebViewer event instead of the Clock Timer, and I can't vouch for file paths either.)
text

ListView2.aia (3.2 KB)

density.html:

<!doctype html>
<head>
 <title>Mobile-Web-App: Test Javascript</title>
 <meta charset="utf-8">
 
<script>
function myOnLoad(){
  
 var devicePixelRatio = window.devicePixelRatio;
 eleRatio = document.getElementById("ratio");
 eleRatio.innerHTML = devicePixelRatio;
 
}
 
window.onload = myOnLoad;
window.AppInventor.setWebViewString("" + devicePixelRatio + "")
</script> 
 
</head>
<body>
<h1>Mobile-Web-App: detect device pixel ratio</h1>
 
devicePixelRatio: <b id="ratio"></b>
 
</body>
</html>

Apparently, you can use Javascript to get a ratio specific to the device, and apply the ratio to the font size to fit the device.

Thank you ! I'll look at it :slightly_smiling_face:
What do you think about having a parameter allowing user to change manually (but once) the size of font : initial size are given (e.g 14 for text, 18 for titles) but user can set them bigger (or smaller) if it happens to be to small on specific screen.
I don't know (yet) how to do it, but I assume that with font size settings and some stored variable, it could work ?
What do you think about this theoretical issue ?

You can also try the "Sizing" property in the Screen1 property. You can set "Responsive" and "Fixed". See if you can see any difference.

In order to allow some adaptation of fonts between Phone and tablet, I looked at finding some way to

distinguish when the app is running on an Android phone or tablet, ignoring Apple Iphones and tablets

Examining screen sizes via height and widths, a crude measure was multiplying the screen width and

screen height and dividing by 10000, to come up with a global AREA figure.

I found that an area > 50 was the region of tablets and an area <50 was the region of phones.

So I decided on the best set of font sizes for the components in my tablet version of my app and similar for

my phone version, and just added code to set the fonts I need to set ffor the most sensitive components

according to the display size. Obviously, if you have to change the fonts of a lot of components, its more work,

but thats the way it goes!

Sorry I cant seem to get this image the size I want!

Hope this helps!

Thank you ! I ignored that option and it's much more readable now (with option "fixed" selected, which is counter-intuitive for me).

very smart and pragmatic way of doing, thank you !

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.