Zoom content to fit in a UWP WebView

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/40786384/zoom-content-to-fit-in-a-uwp-webview

标签

uwp

uwp-xaml