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?

score 20 · Answer 1 · answered May 26 '14 at 21:13

20

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

answered May 26 '14 at 21:13

Erkki Nokso-Koivisto

1,203
15
19

Does this work for windows 8 and with externally hosted content? – N_A May 26 '14 at 21:29
yes, seems to work, anyway, i don't see why it would only work with local content – Erkki Nokso-Koivisto May 26 '14 at 21:48
Are you modifying the content? My understand of the question is that the OP can't modify it. – N_A May 26 '14 at 21:52
1

Working on Windows 10 – Gus Costa May 04 '16 at 16:36
3

This works for disabling pinch zooming on windows 10; but ctrl+scroll wheel zooming still works. – BrainSlugs83 Jan 12 '17 at 22:07

score 1 · Accepted Answer · answered Sep 30 '12 at 23:01

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.

score 1 · Answer 3 · answered Jul 25 '22 at 07:05

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>

score 0 · Answer 4 · answered Jul 07 '21 at 10:07

0

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; 
}

answered Jul 07 '21 at 10:07

user3806549

1,428
1
17
25

score -4 · Answer 5 · edited Mar 22 '16 at 12:11

-4

Just put a

<Rectangle Fill="Transparent"/>

over the webview and that is it.

edited Mar 22 '16 at 12:11

Martin Zabel

3,589
3
19
34

answered Mar 22 '16 at 11:22

ventura8

554
6
18

Er... that'll actually disable ALL interaction with the web view. – BrainSlugs83 Jan 12 '17 at 22:07

How to disable zoom in Windows 8 webviews

5 Answers5

Linked