Search code examples
c#wpfxamlwindows-store-appsuwp

W8.1 UWP / Xaml WebView rendering small on High DPI Screens

We have an issue on our windows store app, it uses a WebView to display custom generated html from the filesystem. The app is written in WPF / Xaml and so the native UI components scale automatically depending on what the user has set their screen scaling to - however the embedded WebView does not - meaning on my laptop's 4k screen, the WebView font is incredibly tiny. At the moment we have to support windows 8.1 so we are compiling for that target - which means we are embedding a IE11 instance. I thought setting the browser zoom level may be a short term solution but it ends up with horizontal scroll bars on the main window so that's a no go.

I found a MSDN article which shows there is a problem with the underlying COM component not automatically being notified of the high DPI awareness of the app it's being embedded within. The article shows how to get around the issue by overriding what flags the component is sent. However upon going down that route, it seems the WebView that is available on the UWP platform is abstracted even further and you cant grab the instance of the Document MSHTML object needed for the above fix to work.

I also noticed this answer which seems to infer there's a scale factor conflict between windows 8.1 apps and the windows 10 OS, but I am unable to locate any more information on that particular issue.

Any advice would be most welcome as I can't imagine what we're doing is that rare.

Thanks

Solution

  • Turns out this is caused by a combination of factors:

    1. We are using Bootstrap 3, which sets the root HTML font size to 10px, and as IE WebView (Even Edge) uses font size adjustments to deal with DPI scaling, having a base font size set disables this functionality.
    2. Windows Apps which target Windows 8.1 have a maximum scaling of 200% (as that was the maximum supported at the time). However Windows 10 increased this limit to iirc 400%. My laptop screen is set to 250% as it's 4k but when I put a windows 8.1 app onto it, the maximum they go to is 200% so there is a slight size reduction there as well.

    I still think this is a fairly serious issue in the Windows Store WebView control as if I open up the bootstrap site in standard edge, it is fine. Even if I do the same with IE11, the page content looks OK even if IE11 itself does not handle DPI at all.