6

I am trying to implement a zoom to content fit function in a XAML-WebView control inside a UWP app. As the semi-official solution for zooming seems to be using JavaScript, my approach was to dynamically set the zoom CSS-property of the body element.

Now the question is to find the right zoom factor.

According to the documentation, the WebView uses the Edge browser in document mode.

However, in Edge, I found that the document.body.clientWidth-property always returns the document width, regardless of the window size and even the zoom factor. Thus, I set the zoom factor using

document.body.style.zoom = (window.innerWidth * 100 / document.body.clientWidth) + '%'

This works in a desktop IE11 set to IE10 document mode, in Edge and also in a range of other browsers such as for example Chrome, basically all browsers that I tested. However, it does not work in a WebView-control which is supposed to use Edge in a Windows 10 UWP app (thanks Jay Zuo for the update).

The problem is that in the WebView control, document.body.clientWidth is, once set, always the same as window.innerWidth so that the resulting zoom factor is always 100%, which is wrong. I would like to rescale the displayed page whenever the user resizes the window.

Does anybody know what alternative property can be used to obtain the preferred document width in a WebView control?

Edit: A minimum example of a web page that I would like to zoom in is the following:

demo.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="container">
        </div>
    </body>
</html>

style.css:

@charset "utf-8";

body {
    background-color: #FFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    overflow: hidden;
    width: 102px;
    height: 76px;
}

#container {
    position: relative;
    width: 102px;
    height: 76px;
    padding-top: 0px;
    background-color: blue;
    background-size: 102px;
    background-repeat: no-repeat;
}

This web page consists of nothing but a blue box. I would like to have a way to zoom that box to fit, i.e., set the zoom factor such that the blue box fills the screen. But for this page, Edge does return body.clientWidth=102 regardless of the window size and therefore, the zoom factor should be calculated correctly.

Georg
  • 5,626
  • 1
  • 23
  • 44
  • 1
    In UWP apps, WebView uses the Microsoft Edge rendering engine to display HTML content. For more info, please see **Remarks** in [WebView class](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.aspx): **In apps compiled for Windows 10, WebView uses the Microsoft Edge rendering engine to display HTML content. In apps compiled for Windows 8 or Windows 8.1, WebView uses Internet Explorer 11 in document mode.** – Jay Zuo Nov 25 '16 at 08:07
  • @JayZuo-MSFT Thanks for the info. However, also in Edge, `document.body.clientWidth` returns the preferred size of the html page and not the size of the window. – Georg Nov 25 '16 at 08:31
  • ...which means the approach described above works in Edge, but not in WebView. – Georg Nov 25 '16 at 08:39
  • 1
    As in my test, in Edge, `document.body.clientWidth` property also under the influence of window's size. See [my screenshot](https://i.stack.imgur.com/LyRAs.png). – Jay Zuo Nov 30 '16 at 13:30
  • @JayZuo-MSFT Thanks for the test. For me, this seems plausible as the website was written to adjust itself to a new size. Unfortunately, the websites I have to support are not able to do that. I edited my question and posted a minimum example of a website I would like to zoom in. – Georg Dec 01 '16 at 08:05
  • 1
    When I tested with your demo in `WebView`, the `document.body.clientWidth` also always return `102`. I tested with the code like `var result = await webView.InvokeScriptAsync("eval", new string[] { "document.body.clientWidth.toString()" });`. As you've know the return value of `clientWidth` property is also related to the website is showing. If the website uses responsive UI, `clientWidth`'s value will also be influenced by window size. – Jay Zuo Dec 02 '16 at 08:04
  • @JayZuo-MSFT Hm. Apparently, I got a bit confused managing the different versions of assumed minimal versions. Perhaps I also confused `document.body.style.zoom` with `document.body.zoom` which doesn't make sense. Anyhow, it is working now, even though I do not know what exactly changed. – Georg Dec 02 '16 at 16:30

2 Answers2

0

The approach actually works fine, I somehow just stupidly exchanged document.body.style.zoom with document.body.zoom which is of course not interpreted by Edge.

Georg
  • 5,626
  • 1
  • 23
  • 44
0

I discovered that if the left and right margins are defined (values other than 0) for a WebView control, then its width will be automatically calculated. And in this case WebView control automatically scales loaded content to fit to width. I'm using VS 2019, UWP project min target version Windows 10 (10586).

Alex Yash
  • 1
  • 1