I am trying to implement a zoom function to match the contents in a XAML-WebView control inside a UWP application. Since the semi-official zoom solution seems to be using JavaScript, my approach was to dynamically set the CSS zoom property for the element body.
Now itβs worth setting the correct scaling factor.
According to the documentation, WebView uses the Edge browser in document mode.
However, in Edge, I found that document.body.clientWidth -property always returns the width of the document, regardless of the size of the window or even the scale factor. So I set the scaling factor using
document.body.style.zoom = (window.innerWidth * 100 / document.body.clientWidth) + '%'
This works on the IE11 desktop installed in IE10 document mode, in Edge, as well as in a number of other browsers, such as, for example, Chrome, basically all the browsers I tested. However, it does not work in the WebView control, which should use Edge in the Windows 10 UWP application (thanks to Jay Zuo for the update).
The problem is that in the WebView control WebView document.body.clientWidth , once set, always matches window.innerWidth , so the resulting scaling factor is always 100% , which is wrong. I would like to resize the displayed page whenever the user resizes the window.
Does anyone know which alternative property can be used to get the preferred width of a document in a WebView control?
Edit:. A minimal example of a webpage that I would like to enlarge 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 only of a blue box. I would like to be able to scale this field to fit, i.e. Set the scaling factor so that the blue box fills the screen. But for this page, Edge returns body.clientWidth=102 regardless of the size of the window, and therefore the scaling factor must be calculated correctly.