question

GopalDevra avatar image
1 Vote"
GopalDevra asked ·

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
Toggle Comment visibility. Current Visibility: Visible to all users

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

FayWang-MSFT avatar image FayWang-MSFT ·

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

0 Votes 0 ·
GopalDevra avatar image GopalDevra FayWang-MSFT ·

@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 Votes 0 ·

3 Answers

danielescipioni avatar image
0 Votes"
danielescipioni answered ·

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 ·
10 |1000 characters needed characters left characters exceeded
Toggle Comment visibility. Current Visibility: Visible to all users

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

GopalDevra avatar image GopalDevra ·

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 Votes 0 ·
RoyLi-MSFT avatar image
0 Votes"
RoyLi-MSFT answered ·

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 ·
10 |1000 characters needed characters left characters exceeded
Toggle Comment visibility. Current Visibility: Visible to all users

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

GopalDevra avatar image GopalDevra ·

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 Votes 0 ·
RoyLi-MSFT avatar image RoyLi-MSFT GopalDevra ·

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

0 Votes 0 ·
GopalDevra avatar image GopalDevra RoyLi-MSFT ·

@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 Votes 0 ·
Show more comments
dhollowe avatar image
0 Votes"
dhollowe answered ·

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.

·
10 |1000 characters needed characters left characters exceeded
Toggle Comment visibility. Current Visibility: Visible to all users

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