How to disable zoom in Windows 8 webviews

Question

I'm using a webview in an app to display externally hosted content, but the web view lets the user zoom with a pinch gesture and I'd like to disable this.

I can't find any such property on the webview itself, and I've not had any success with a viewport meta tag such as:

<meta name="viewport" content="user-scalable=no">

Is there a way to do this?

Answer 1

I was able to disable pinch and zoom in Windows 8.1 WebView using following in CSS:

html, body
{
  -ms-content-zooming:none;    
}

There's a long list stuff try: http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx

Answer 2

Unfortunately this is not possible.

http://social.msdn.microsoft.com/Forums/en-AU/winappswithcsharp/thread/8eecf85d-ebd3-4bc0-ad17-15f342efad25

If the WebView works similarly to the WP7 version then you may be able to catch the events in html and cancel them there similarly to this.

Answer 3

If you'd like to disable pinch zooming from your C# code, you can use InvokeScriptAsync to inject the -ms-content-zooming:none style as follows:

        private void WebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            if (!args.IsSuccess) return;
            DisablePinchZoom(sender);
        }

        private static void DisablePinchZoom(WebView webView)
        {
            string[] args = {"document.body.style['-ms-content-zooming']='none';"};
            webView.InvokeScriptAsync("eval", args);
        }

Source: https://social.msdn.microsoft.com/Forums/vstudio/en-US/61fa3676-9420-4239-a6d6-b327153884c8/how-do-i-arrange-multiple-webviews-in-a-scrolling-stack-panel?forum=w81prevwCsharp

And if you want to disable the Ctrl + '+/-' or Ctrl + MouseWheel zoom, you can place the Webview inside a ScrollViewer and set ZoomMode="Disabled":

<ScrollViewer ZoomMode="Disabled">
    <WebView NavigationCompleted="WebView_NavigationCompleted" />
</ScrollViewer>