Creating responsive canvas apps is not a new thing, sometimes we just want to access the app from both the mobile and the big screen. So I won’t go into how to implement responsive design here, there is documentation for that or lots of articles from other experts 😇

However, some time ago I came across a certain issue with iOS devices. The Safari browser kernel (used to render canvas app) does a nasty thing, if the font size of the input control (text box, combobox etc.) is too small it will zoom-in, but once the user leaves the element it no longer zooms out 😡 This feature is extremely annoying for me as a user.

Fortunately, I soon discovered a thread in the community forum 💜 where someone figured out that you can simply increase the font size of the input control. Since then, I’ve started putting the following code in all my apps.

// App.OnStart = 
Set(
    varStyles, 
    {
        fontSize: {
            sm: 12,
            md: 14,
            inputMd: If(Host.OSType = "iOS", 16, 14),
            lg: 16
        },
        // ...
    }
);

Then for all input controls I set the font size to varStyles.fontSize.inputMd. Since Android doesn’t suffer from this issue, I didn’t want to increase the font size unnecessarily. Thus, I added the condition to increase font size for iOS devices only.

With the introduction of modern components for canvas apps, I was dismayed by the missing support for font size, as the zoom-in issue on iOS devices also appeared on modern components 😭 However, without font size property there was no way to address it. Until now! Modern components now support changing font size as well, so we can happily use them for responsive canvas apps 🤩