cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
RemiChambard3
Advocate IV
Advocate IV

Dimensions in a mobile application

Hi,

 

I am building a mobile application. I have built a mock-up of this application using Adobe XD.

 

To make my application fully responsible, I have deactivated the "Scale to fit" option in the Settings.

 

When I specify a size for a component or the size of a Font in a Label for examples, it looks "half-sized". For exemple, if I have a 100x100 DIV, the same DIV (in a Html Text component) appears in my mobile application at 50x50. It seems that I have to double all dimensions to make it look like as on my Adobe XD mockup.

 

I can't reproduce the behaviour when I build my app using the Tablet form factor. Every dimensions seems appropriate.

 

How can you explain this behavior ?

 

Thanks

 

2 REPLIES 2
HenryARPhillips
Continued Contributor
Continued Contributor

My only thought is that this is how Microsoft ensures it is legible on a mobile form factor, although you would think the size would be the size you set and then if it looks bad or oversized it is on you 🙂 But that is the only logic/opinion I can apply, especially as it sticks with the larger/specified sizing in the larger form factor of tablet.

 

Out of interest your Power App is specified as Mobile as opposed to Tablet being rendered in a mobile as I would definitely expect the size to dynamically be reduced in that case. However if you are starting off in mobile, then I would expect it to remain the size you set.

GarethPrisk
Super User II
Super User II

PowerApps does appear to handle font rendering differently between apps established as Tablet vs. Phone.

We experienced this on the Dataverse for Teams apps, and have a few observations:

  • Consider using a variable to define your font sizes
  • Tweak this variable, as-needed, to achieve your desired sizing
  • Dynamically set it based on the context of how/when the app is running

Here is the snippet from our apps

// Set Sizes Variable
Set(
    gblAppSizes,
    {
        Padding: {Page: 20},
        Font: {
            Small: If(
                gblAppSetting_inputMobileOnWeb,
                18,
                gblAppSetting_inputMobile,
                11,
                9
            ) + gblAppSetting_inputScaleFontsBy,
            Medium: If(
                gblAppSetting_inputMobileOnWeb,
                20,
                gblAppSetting_inputMobile,
                15,
                10.5
            ) + gblAppSetting_inputScaleFontsBy,
            Large: If(
                gblAppSetting_inputMobileOnWeb,
                22,
                gblAppSetting_inputMobile,
                18,
                15
            ) + gblAppSetting_inputScaleFontsBy,
            ExtraLarge: If(
                gblAppSetting_inputMobileOnWeb,
                25,
                gblAppSetting_inputMobile,
                22,
                18
            ) + gblAppSetting_inputScaleFontsBy
        }
    }
);

As you can see, the gblAppSizes.Font.Medium for example, may be derived dynamically

  • The default is 10.5 which is what looks best in Teams
  • If the app is a phone, we have to scale it up per the fluent standards, to 15
  • If the app is a phone, and it's running in a desktop/web, we have to scale it up further, to 20

 

You can extrapolate this approach for your app. Unfortunately, as you mentioned, PowerApps does not appear to render a given font size identically on all devices. It's not even consistently scaled between devices. Some trial-and-error will get you what you need.

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Power Apps June 2021

June Power Apps Community Call

Don't miss the call this month on June 16th - 8a PDT

Top Solution Authors
Top Kudoed Authors
Users online (94,987)