Question

我正在尝试在UWP应用程序内的XAML-WebView控件中实现缩放到内容适配功能。由于semi-official solution for zooming似乎使用JavaScript，我的方法是动态设置body元素的zoom CSS属性。

现在的问题是找到合适的缩放系数。

根据文档，WebView在文档模式下使用Edge浏览器。

然而，在Edge中，我发现document.body.clientWidth - 属性始终返回文档宽度，无论窗口大小甚至缩放因子如何。因此，我使用

设置缩放系数

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

这适用于设置为IE10文档模式的桌面IE11，在Edge以及其他浏览器中，例如Chrome，基本上我测试过的所有浏览器。但是，它不适用于WebView - 控件，它应该在Windows 10 UWP应用程序中使用Edge（感谢Jay Zuo的更新）。

问题在于，在WebView控件中，document.body.clientWidth一旦设置，始终与window.innerWidth相同，因此生成的缩放系数始终为100%，是错的。我想在用户调整窗口大小时重新缩放显示的页面。

是否有人知道可以使用哪种替代属性来获取WebView控件中的首选文档宽度？

修改：我要放大的网页的最小示例如下：

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;
}

此网页只包含一个蓝色框。我想有办法缩放该框以适应，即设置缩放系数，使蓝框填满屏幕。但对于此页面，无论窗口大小如何，Edge都会返回body.clientWidth=102，因此，应正确计算缩放系数。

Answer 1

这种方法实际上运作正常，我不知何故只是愚蠢地用document.body.style.zoom与document.body.zoom进行了愚蠢的交换，这当然不是由Edge解释的。

Answer 2

我发现，如果为WebView控件定义了左边距和右边距（值不为0），那么它将自动计算宽度。在这种情况下，WebView控件会自动缩放加载的内容以适合宽度。我正在使用VS 2019，UWP项目的最低目标版本Windows 10（10586）。

缩放内容以适应UWP WebView

2 个答案: