WP7 WebBrowser control zoom

Question

Some pages are too small and hard to read in WebBrowser control, is zooming possible?

score 5 · Answer 1 · answered Jul 20 '12 at 10:45

I went with the following hack:

BrowserControl.LoadCompleted += Browser_dohack;
private void Browser_dohack(object sender, NavigationEventArgs e)
    {
        string html = BrowserControl.SaveToString();
        string hackstring = "<meta name=\"viewport\" content=\"width=320,user-scalable=yes\" />";
        html = html.Insert(html.IndexOf("<head>", 0) + 6, hackstring);
        BrowserControl.NavigateToString(html);
        BrowserControl.LoadCompleted -= Browser_dohack;
    }

score 5 · Answer 2 · answered Dec 22 '10 at 00:03

5

If you have control of the html you can set the initial-scale of the viewport. More background here.

The IE Mobile Viewport on Windows Phone 7

answered Dec 22 '10 at 00:03

Mick N

14,892
2
35
41

unfortunately it's 3rd party page, If there will be no other options I could try ask them to make changes... – Janci Dec 22 '10 at 08:28
After up-voting you for finding this attribute I read the fine text on your link: *Note: In the initial release, IE Mobile for Windows Phone 7 does not support initial-scale, maximum-scale, or minimum-scale. :( – johnhforrest Apr 08 '11 at 17:26
I cannot assure you on the status of the support, but in WP7 it was IE7"and half" and in Mango 7.1 it is said to be IE8"and a bit". It is possible that they added support for that in the newest release – quetzalcoatl Sep 12 '11 at 17:12

score 0 · Answer 3 · answered Jan 29 '13 at 16:35

I went with setting a CSS3 scale-function on the transform-property of the body for the requested page, as I really know the layout and that it probably won't change anytime soon.

private void OnBrowserNavigated(object sender, NavigationEventArgs e) {
    var browser = (sender as WebBrowser);
    browser.InvokeScript("eval", 
        "var script = document.createElement('script');" +
        "script.src = \"https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js\";" +
        "document.body.appendChild(script);" +
        "$('body').css('transform-origin', '0 0');" +
        "$('body').css('transform', 'scale(2.5)');"             
    );
}

I solved it via jQuery as I find it way more convenient. I could have done it via plain javascript as well, as the targeted browser is not in question here.

score 0 · Answer 4 · answered Dec 21 '10 at 14:12

0

Yes, assuming that you haven't prevented user scaling, you can tap to zoom or use pinching/stretching in the same way you can in the full browser.

answered Dec 21 '10 at 14:12

Matt Lacey

65,560
11
91
143

1

I need to do it programmatically in .xaml or .cs – Janci Dec 21 '10 at 14:45
@Janci This isn't possible. If it's your content you're showing then style it apropriately for display on the phone. – Matt Lacey Dec 21 '10 at 15:13
I need the same thing (get the WebBrowser to react the same way as when the user double taps the rendered web page), but triggered from code. Is it possible to put mouse click events in the Silverlight event queue or something (thinking a bit win32 here...)? – peSHIr Jan 23 '11 at 18:44
@peSHIr - No it is not currently (7.0-7.5) possible to inject events, nor it is not possible to invoke that behaviour. In the 7.1/7.5 API you may want to try to hack into the PanZoomContainer (a shallow visual child of the WebBrowser control), but it is highly unlikely that you will succeed, most of the PZC's logic is marked as internal/private thus inaccessible (I mean, uninvokeable) for WP7 Reflection – quetzalcoatl Sep 12 '11 at 17:10
@Matt-I think it actually could be possible-you may access and modify the contents of the page by executing JavaScript code with the InvokeScript method. With that method you can even inject jQuery library and with jQ it is easy to modify the page. I don't know though, whether modification to the meta tags will cause the page to be rerendered. It may happen that the meta tags are read only upon first render.. If you want to give InvokeScript a try, check out http://stackoverflow.com/questions/7375705/jquery-selector-not-working-on-windows-phone-7/7378779#7378779 - using InvokeScript is tricky – quetzalcoatl Sep 12 '11 at 17:18
eh, I've exceeded the char limit in prev comment. I just want to say, that I completely agree with Matt on the thing, that it is the PAGE's owner that should style it appropriately - either permanently, or in response to the UserAgent string received in query. But, if you have no change on convincing them or the time is short - you can try InvokeScript to patch it up yourself. – quetzalcoatl Sep 12 '11 at 17:20

WP7 WebBrowser control zoom

4 Answers4

Linked