Migrating Windows 8 app to UWP (i.e. Windows 10) fonts and icon size increased?

Question

question

GopalDevra asked · Apr 15 at 07:15 AM

Migrating Windows 8 app to UWP (i.e. Windows 10) fonts and icon size increased?

Windows 8.1 app is successfully migrated to the UWP(i.e. Windows 10). But the font and the icon sizes are increased. Googled but couldn't find a specific reason.

Findings are:

Tried making the same configuration dummy projects in Visual Studio 2015 the same changes are visible there as well.
Tested in the Local Machine in Visual Studio 2015.
Windows 10 window.innerWidth:window.innerHeight:1024:768 (i.e. Resolution).
Windows 8 window.innerWidth:window.innerHeight:1234:925 (i.e. Resolution).
Googled and found somewhere, that the font and icon sizes depend on the device on the UWP app.

Can anyone please explain why?

The app is using Cordova and having 4 projects under solution explorer. These projects are in javascript, C#, and C++;

windows-uwp

2

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

FayWang-MSFT · Apr 17 at 08:47 AM

May I know how did you migrate win8 app to win10? Can you show us the detailed steps for migration?

0 · ·

GopalDevra FayWang-MSFT · Apr 17 at 09:48 AM

@FayWang-MSFT, I followed this documentation https://docs.microsoft.com/en-us/visualstudio/misc/migrate-apps-to-the-universal-windows-platform-uwp?view=vs-2015

As per the requirements, I applied minimum changes to migrate the app to the UWP app.

0 · ·

Answer 1 · 2020-04-15T19:02:14.203Z

danielescipioni answered · Apr 15 at 07:02 PM

Hi @GopalDevra-6990,

here https://docs.microsoft.com/en-us/windows/uwp/porting/w8x-to-uwp-root there is the documentation related to the porting from Windows Runtime 8.x to UWP, and in this section https://docs.microsoft.com/en-us/windows/uwp/porting/w8x-to-uwp-porting-xaml-and-ui#resource-keys-and-textblock-style-sizes the specific topic related to font size.

Hope this can help.

1 Share

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

GopalDevra · Apr 16 at 11:37 AM

Thanks @danielescipioni, But I couldn't find the answer to my question. And now adding that our project is js based, and the Cordova is also being used.

Seems like this documentation doesn't fit for the Webview/Cordova.

@RoyLi-MSFT can you please help me with this?

0 · ·

Answer 2 · 2020-04-20T09:30:06.99Z

RoyLi-MSFT answered · Apr 20 at 09:30 AM

Hello,

Welcome to Microsoft Q&A!

>> But the font and the icon sizes are increased.

The most possible reason for this issue may be caused due to the different scale factors in Windows 8.1 and Windows 10. Although Cordova for UWP uses a WWA (native JavaScript) app, the scale factors should be the same as other apps. Based on Display Scaling in this document: Display Scaling in Windows 10, it mentions in Windows 8.1, store apps scaled to 100%, 140%, and 180%. But from this document: Icon types, locations, and scale factors, for Windows 10, it supports 100%, 125%, 150%, 200%, and 400% scale factors. So you may have used a scale factor different from win10. For example, you used 140% in windows 8.1, but windows 10 does not have the same factor, then it may scale to 150%. So in that case, you may need to adjust the sizes of the app by yourself.

Thank you.

6 Share

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

GopalDevra · Apr 23 at 12:20 PM

Hi @RoyLi-MSFT

As you suggested, tried to find out the scale factor, and in UWP and Windows 8.1 app, the scale factor is 1.

This line of code returns 1 in javascript helper file

 ResolutionScale resolutionScale = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().ResolutionScale;

So I assume the scale factor is 1 in the both apps.

I am looking into the Cordova code for the same thing.

0 · ·

RoyLi-MSFT GopalDevra · Apr 24 at 09:46 AM

Please share the result when you get the scale factor in Cordova. I'll also consult the team about this.

0 · ·

GopalDevra RoyLi-MSFT · Apr 28 at 06:52 AM

@RoyLi-MSFT I created a Cordova app using this link https://cordova.apache.org/docs/en/latest/guide/cli/index.html.

The results are the same as the above cases, i.e. "ResolutionScale" is the same 1 for the both apps. And the
And the "window.devicePixelRatio" values are 1 for Windows 10 and 0.8299 for the Windows 8.

It seems like when we update the Display scaling settings(i.e. 100%, 150% ..... and so on) in the Windows system then the scaling factor of the app can change.

Also, I have tested with the different sets of the App icon sizes (i.e. 1x, 2x, 3x ratio icons), it's not affecting the font/icon scaling of the app.

0 · ·

Show more comments

Answer 3 · 2020-05-19T21:03:59.15Z

dhollowe answered · May 19 at 09:03 PM

Hi @GopalDevra,
As Roy mentioned, this is by design. Since users are in charge of the size of text and images, we should respond with layout changes to ensure the app is usable at various sizes. This is very important for accessibility. We do offer guidance on the topic for UWP here: https://docs.microsoft.com/en-us/windows/uwp/design/layout/responsive-design.

Share

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

question