我正在尝试在UWP应用程序内的XAML-WebView控件中实现缩放到内容适配功能.由于缩放的半官方解决方案似乎是使用JavaScript,我的方法是动态设置zoombody元素的CSS属性.
现在的问题是找到合适的缩放系数.
根据文档,WebView在文档模式下使用Edge浏览器.
但是,在Edge中,我发现document.body.clientWidth-property总是返回文档宽度,无论窗口大小甚至缩放因子如何.因此,我使用设置缩放系数
document.body.style.zoom = (window.innerWidth * 100 / document.body.clientWidth) + '%'
这适用于桌面IE11设置为IE10文档模式,在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;
}
这个网页只包含一个蓝色框.我想有办法缩放该框以适应,即设置缩放系数,使蓝色框填满屏幕.但是对于此页面,body.clientWidth=102无论窗口大小如何,Edge都会返回,因此应正确计算缩放系数.