gpt4 book ai didi

c# - 缩放内容以适应 UWP WebView

转载 作者:太空狗 更新时间:2023-10-29 22:00:08 32 4
gpt4 key购买 nike

我正在尝试在 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,基本上是我测试过的所有浏览器。但是,它在 WebView 控件中不起作用,该控件应该在 Windows 10 UWP 应用程序中使用 Edge(感谢 Jay Zuo 的更新)。

问题是在 WebView 控件中,document.body.clientWidth 一旦设置,总是与 window.innerWidth 相同这样得到的缩放因子总是 100%,这是错误的。每当用户调整窗口大小时,我想重新调整显示的页面。

有人知道在 WebView 控件中可以使用什么替代属性来获取首选文档宽度吗?

编辑:我想放大的网页的最小示例如下:

演示.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>

样式.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,因此应该正确计算缩放系数。

最佳答案

该方法实际上工作正常,我只是愚蠢地将 document.body.style.zoomdocument.body.zoom 交换,这当然不会被 Edge 解释。

关于c# - 缩放内容以适应 UWP WebView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40786384/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com