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

Question

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++;

Answer 1

Hi @GopalDevra-6990,

here https://learn.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://learn.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.

Answer 2

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.

Answer 3

Hi @Gopal Devra ,
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://learn.microsoft.com/en-us/windows/uwp/design/layout/responsive-design.