Question

我的WP8应用程序有一个WebBrowser控件，用户可以在其中平移和缩放显示的页面，直到它对他/她看起来很好。我想捕获当前的缩放和翻译，以便稍后我可以将同一页面缩放到相同的大小。

我有wb.InvokeScript（）为我调用任意脚本，wb_ScriptNotify（）捕获任何返回的信息，但我无法弄清楚要捕获的页面元素的属性。标准element.scrollWidth或element.offsetWidth不受缩放的影响。我暂时兴奋地阅读IE10属性element.scale，element.translationX和element.translationY，但它们是GestureEvent的属性，而不是像document.documentElement或window这样的HTML元素。

任何人都可以提供一些提示吗？

Answer 1

我现在有一个足够好的解决方案。它不漂亮。它适用于带有IE10的WP8，但我怀疑它适用于早期版本的IE的WP7。

当用户缩放屏幕时（通过捏住访客）window.outer {Width，Height}会缩小缩放系数。如果窗口最初是1024宽并且用户缩放了X2，那么window.outerWidth现在是512.而window.page {X，Y} Offset同样会减少相同的因子。然而元素大小（例如document.body.clientWidth）未更改。因此浏览器似乎使窗口变小但仅留下了页面。（想想看，这就是缩放的定义......）

但你不能设置 window.outer {Width，Height}以使浏览器缩放。但是你可以设置document.body.style.zoom。当你进行CSS缩放时，window.page {X，Y} Offset不会缩放（也不是window.outer（Width，Height）;这是一个不同但是自洽的zoom缩放定义）。

所以，要追踪这个：当页面最初加载时（在用户可以缩放之前），

var oldWidth = window.outerWidth;

用户完成操作后，

var newWidth = window.OuterWidth;
var calcZoom = oldWidth / newWidth;
var calcPageXOffset = window.pageXOffset * calcZoom;
var calcPageYOffset = window.pageYOffset * calcZoom;

当您导航回相同的URI时重新创建缩放和偏移：

document.body.style.zoom = calcZoom;
window.scrollTo( calcPageXOffset, calcPageYOffset);

检测页面的当前缩放，然后调整大小到相同的缩放比例？

1 个答案: