CODEWITHSUNDEEP
windows-8windows-runtime
Chris Newman
Chris Newman

Reputation: 2240

How to disable zoom in Windows 8 webviews

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?

Upvotes: 6

Views: 5396

Answers (5)

Andrei
Andrei

Reputation: 111

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>

Upvotes: 1

user3806549
user3806549

Reputation: 1438

I used this code, and finally got it to work.

html, body
{
  -ms-content-zooming:none;  
  touch-action: none;
  content-zooming: none;
  overflow-y: hidden; // hide vertical
overflow-x: hidden; 
overflow-y: none; // hide vertical
overflow-x: none; 
}

Upvotes: 0

ventura8
ventura8

Reputation: 554

Just put a

<Rectangle Fill="Transparent"/>

over the webview and that is it.

Upvotes: -4

Erkki Nokso-Koivisto
Erkki Nokso-Koivisto

Reputation: 1265

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

Upvotes: 20

N_A
N_A

Reputation: 19897

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.

Upvotes: 1

Related Questions