缩放内容以适应 UWP WebView答案

【问题标题】：Zoom content to fit in a UWP WebView缩放内容以适应 UWP WebView
【发布时间】：2017-04-08 18:09:26
【问题描述】：

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

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

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

但是，在 Edge 中，我发现 document.body.clientWidth-property 始终返回文档宽度，无论窗口大小甚至缩放系数如何。因此，我使用

设置缩放系数

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

这适用于设置为 IE10 文档模式的桌面 IE11、Edge 以及一系列其他浏览器，例如 Chrome，基本上是我测试的所有浏览器。但是，它不适用于应该在 Windows 10 UWP 应用程序中使用 Edge 的 WebView-control（感谢 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，因此应该正确计算缩放系数。

【问题讨论】：

在 UWP 应用中，WebView 使用 Microsoft Edge 渲染引擎来显示 HTML 内容。有关详细信息，请参阅WebView class 中的备注：在为 Windows 10 编译的应用中，WebView 使用 Microsoft Edge 呈现引擎来显示 HTML 内容。在为 Windows 8 或 Windows 8.1 编译的应用中，WebView 在文档模式下使用 Internet Explorer 11。
@JayZuo-MSFT 感谢您提供信息。然而，同样在 Edge 中，document.body.clientWidth 返回 html 页面的首选大小，而不是窗口的大小。
...这意味着上述方法适用于 Edge，但不适用于 WebView。
在我的测试中，在 Edge 中，document.body.clientWidth 属性也受窗口大小的影响。见my screenshot。
当我在WebView 中使用您的演示进行测试时，document.body.clientWidth 也总是返回102。我用var result = await webView.InvokeScriptAsync("eval", new string[] { "document.body.clientWidth.toString()" });之类的代码进行了测试。如您所知，clientWidth 属性的返回值也与网站正在显示有关。如果网站使用响应式 UI，clientWidth 的值也会受到窗口大小的影响。

标签： c# uwp uwp-xaml

【解决方案1】：

该方法实际上效果很好，我不知何故只是愚蠢地将document.body.style.zoom 与document.body.zoom 交换，这当然不是由Edge 解释的。

【讨论】：

【解决方案2】：

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

【讨论】：