Detecting current scaling of page, then resizing to same scaling later?

Question

My WP8 app has a WebBrowser control in which the user can pan and zoom the displayed page till it looks good to him/her. I would like to capture the current scaling and translation, so I can later show the same page zoomed to the same size.

I have wb.InvokeScript() to invoke arbitrary scripts for me and wb_ScriptNotify() to capture any returned information, but I cannot figure out what properties of what page element to capture. Standard element.scrollWidth or element.offsetWidth aren't affected by zooming. I was temporarily excited to read about IE10 properties element.scale, element.translationX and element.translationY, but they are properties of a GestureEvent, not an HTML element like document.documentElement or window.

Can anyone provide some hints?

The answer is a bit old and does not include IE9, but that's a good place to start: http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers — Kevin Gosse, Sep 06 '13 at 05:55

score 0 · Accepted Answer · answered Sep 12 '13 at 23:50

I have a solution that is good enough for now. It is not pretty. It works in WP8 with IE10, but I doubt it works for WP7 with the earlier version of IE.

When the user zooms the screen (by pinch guesture) window.outer{Width,Height} are reduced by the zoom factor. If the window was originally 1024 wide and user zoomed X2, then window.outerWidth is now 512. And window.page{X,Y}Offset are likewise reduced by the same factor. However element sizes (such as document.body.clientWidth) are not changed. So the browser appears to have made the window smaller but left the page alone. (Come to think of it, that's kind of the definition of zoom...)

But you cannot set window.outer{Width,Height} to cause the browser to zoom. But you can set document.body.style.zoom. When you do CSS scaling, window.page{X,Y}Offset are not scaled (and neither is window.outer(Width,Height); this is a different, but self-consistent, definition of zoom).

So, to track this: When page initially loads (before user can zoom),

var oldWidth = window.outerWidth;

After user finishes manipulating,

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

To recreate the scaling and offset when you navigate back to the same URI:

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

Detecting current scaling of page, then resizing to same scaling later?

1 Answers1