缩放内容以适应 UWP WebView [英] Zoom content to fit in a UWP WebView

查看:38
本文介绍了缩放内容以适应 UWP WebView的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在 UWP 应用程序内的 XAML-WebView 控件中实现内容适合功能的缩放.正如 半官方缩放解决方案 似乎为了使用 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 控件(感谢 Jay Zuo 的更新).

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

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

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

demo.html:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><头><meta charset="utf-8"><title>演示</title><link rel="stylesheet" type="text/css" href="style.css"><身体><div id="容器">

</html>

style.css:

@charset "utf-8";身体 {背景颜色:#FFF;左边距:0px;边距顶部:0px;边距右:0px;底边距:0px;溢出:隐藏;宽度:102px;高度:76px;}#容器 {位置:相对;宽度:102px;高度:76px;填充顶部:0px;背景颜色:蓝色;背景尺寸:102px;背景重复:不重复;}

此网页仅由一个蓝色框组成.我想有一种方法来缩放该框以适合,即设置缩放系数以使蓝色框充满屏幕.但是对于这个页面,Edge 会返回 body.clientWidth=102 而不管窗口大小,因此,应该正确计算缩放系数.

解决方案

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

I am trying to implement a zoom to content fit function in a XAML-WebView control inside a UWP app. As the semi-official solution for zooming seems to be using JavaScript, my approach was to dynamically set the zoom CSS-property of the body element.

Now the question is to find the right zoom factor.

According to the documentation, the WebView uses the Edge browser in document mode.

However, in Edge, I found that the document.body.clientWidth-property always returns the document width, regardless of the window size and even the zoom factor. Thus, I set the zoom factor using

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

This works in a desktop IE11 set to IE10 document mode, in Edge and also in a range of other browsers such as for example Chrome, basically all browsers that I tested. However, it does not work in a WebView-control which is supposed to use Edge in a Windows 10 UWP app (thanks Jay Zuo for the update).

The problem is that in the WebView control, document.body.clientWidth is, once set, always the same as window.innerWidth so that the resulting zoom factor is always 100%, which is wrong. I would like to rescale the displayed page whenever the user resizes the window.

Does anybody know what alternative property can be used to obtain the preferred document width in a WebView control?

Edit: A minimum example of a web page that I would like to zoom in 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 of nothing but a blue box. I would like to have a way to zoom that box to fit, i.e., set the zoom factor such that the blue box fills the screen. But for this page, Edge does return body.clientWidth=102 regardless of the window size and therefore, the zoom factor should be calculated correctly.

解决方案

I discovered that if the left and right margins are defined (values other than 0) for a WebView control, then its width will be automatically calculated. And in this case WebView control automatically scales loaded content to fit to width. I'm using VS 2019, UWP project min target version Windows 10 (10586).

这篇关于缩放内容以适应 UWP WebView的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆