Disable zoom on web-view react-native?

Question

How to disable zoom on react-native web-view,is there a property like hasZoom={false}(just an example) that can be included in the below web-view tag that can disable zooming. It has to be working on both android and ios.

<WebView
     ref={WEBVIEW_REF}
     source={{uri:Environment.LOGIN_URL}}
     ignoreSslError={true}
     onNavigationStateChange={this._onNavigationStateChange.bind(this)}
     onLoad={this.onLoad.bind(this)}
     onError={this.onError.bind(this)}
 ></WebView>

do you find any solution to avoid zoom on double click for iOS and Android in RN? — Sujit, Oct 17 '17 at 03:36
I think it's an issue reported on github .. https://github.com/facebook/react-native/issues/10536 check this out — Najam, Dec 26 '17 at 04:13
This may help you. https://stackoverflow.com/questions/50110920/how-to-zoom-out-in-webview-in-react-native/50127083#50127083 — Smit Thakkar, May 02 '18 at 04:46

shahonseven · Accepted Answer · 2019-10-22T15:28:35.957

67

Thought this might help others, I solved this by adding the following in the html <head> section:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">

edited Oct 22 '19 at 15:28

answered Jan 14 '18 at 18:22

shahonseven

1,072
11
16

how do you add such header? inside source ? can you please give an example? – Smit Thakkar Apr 30 '18 at 20:01
@Smit - put in in the webpage's header. – shahonseven May 02 '18 at 01:46
3

Thanks for quick reply. How can we insert this code into other webpage's header? are you suggesting below? `' }} />` sorry if I am doing it wrong but feel free to correct me. – Smit Thakkar May 02 '18 at 02:54
1

Add the `meta` tag in your index.html (you can find it in your `reactproject/public` folder – obai Jan 01 '20 at 00:47
6

This would only apply if you had control over the shown web page and thus doesn't answer the question. – Lenka Pitonakova Sep 10 '20 at 20:13
Using meta tag above show blank screen, is there any solution yet? – Chanrithisak Phok Jan 24 '22 at 04:11

Amal p · Answer 2 · 2019-04-11T11:39:02.393

30

For those who want a clear idea:

const INJECTEDJAVASCRIPT = `const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `

 <WebView
  source={{ html: params.content.rendered }}
  scalesPageToFit={isAndroid() ? false : true}
  injectedJavaScript={INJECTEDJAVASCRIPT}
  scrollEnabled
 />

edited Apr 11 '19 at 11:39

answered Jul 31 '18 at 08:12

Amal p

2,882
4
29
49

1

Had to remove 'width=device-width' in my case. You saved my time. Thanks. – Dinith Minura Dec 18 '18 at 05:19
1

yes, the values have to be changed according to your requirements. – Amal p Dec 18 '18 at 06:27

score 13 · Answer 3 · answered Jun 19 '17 at 10:19

13

Try scalesPageToFit={false} more info in here

answered Jun 19 '17 at 10:19

Ismail Iqbal

2,774
1
25
46

1

Wow wow wow. This is a very clean option for maintaining screen size on mobile – Devmaleeq Aug 07 '21 at 01:13

score 11 · Answer 4 · answered Nov 04 '20 at 17:54

If you are using WKWebView - scalesPageToFit prop does not work. You can check this issue here that will lead you to this one

Now to accomplish what you want you should use the injectedJavascript prop. But there is something else as described here

Be sure to set an onMessage handler, even if it's a no-op, or the code will not be run.

This took me some time to discover. So in the end you have something like this:

const INJECTED_JAVASCRIPT = `(function() {
  const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta);
})();`;

<WebView
  source={{ uri }}
  scrollEnabled={false}
  injectedJavaScript={INJECTED_JAVASCRIPT}
  onMessage={() => {}}
/>

I've signed only to comment that this is the only solution that worked for me! — grenos, Mar 28 '22 at 10:29

ganesh konathala · Answer 5 · 2019-04-21T06:30:48.337

10

Little hacky stuff but it works

const INJECTEDJAVASCRIPT = 'const meta = document.createElement(\'meta\'); meta.setAttribute(\'content\', \'width=device-width, initial-scale=1, maximum-scale=0.99, user-scalable=0\'); meta.setAttribute(\'name\', \'viewport\'); document.getElementsByTagName(\'head\')[0].appendChild(meta); '



<WebView
        injectedJavaScript={INJECTEDJAVASCRIPT}
        scrollEnabled
        ref={(webView) => {
          this.webView = webView
        }}
        originWhitelist={['*']}
        source={{ uri: url }}
        onNavigationStateChange={(navState) => {
          this.setState({
            backButtonEnabled: navState.canGoBack,
          })
        }}
      />

Note initial-scale=1, maximum-scale=0.99, user-scalable=0

edited Apr 21 '19 at 06:30

answered Apr 21 '19 at 06:25

ganesh konathala

317
1
4
14

hi, why is the maximum scale `0.99` instead of `1`? – Donni Sep 13 '19 at 10:27
Hi! Your solution is only working in android. Not in iOS. Do you have any idea about the iOS? How to disable pinch to zoom in iOS as well? – Ajay May 30 '20 at 07:49

score 5 · Answer 6 · answered Oct 07 '22 at 23:29

5

I was also find me with this problem and I resolved using

setBuiltInZoomControls={false} like prop in WebView

example

<WebView
   /*all prop to use*/ 
   setBuiltInZoomControls={false}
/>

I hope that to be help

answered Oct 07 '22 at 23:29

gregoryperez777

61
1
1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 12 '22 at 02:44
This answer is what i want,thanks.My requirement is to disable pinch to zoom and double tap to zoom on Android.Refer [here](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#setbuiltinzoomcontrols) – JiajiaGu Nov 04 '22 at 02:43

score 2 · Answer 7 · answered Mar 03 '18 at 18:47

2

I was able to disable zooming, text selection and other pointer events by wrapping WebView in a View and setting a few props:

<View pointerEvents="none">
  <WebView
    source={{ uri: webviewUrl }}
    scrollEnabled={false}
  />
</View>

answered Mar 03 '18 at 18:47

jmwicks

542
5
9

Hi, thanks a lot for the reply. Well, it's still not giving the desired output. ` ` Also I wasn't able to touch any buttons on webpage while using `pointerEvents="none"` Check out the output here: https://files.slack.com/files-tmb/T02UA0972-FAG2SRTDW-b99f2fb411/screenshot_2018-05-01-19-15-14_1024.png Desire output - https://files.slack.com/files-tmb/T02UA0972-FAFFBFFTJ-d0082bba5e/screenshot_2018-04-30-19-51-55_1024.png – Smit Thakkar May 02 '18 at 02:23

score 0 · Answer 8 · answered Jun 13 '23 at 12:12

0

Just set setBuiltInZoomControls={false} should work in webview

answered Jun 13 '23 at 12:12

Abhishek Sharma

359
3
16

score -2 · Answer 9 · answered Dec 26 '17 at 04:07

For anyone in the future, I solved this by adding the following css :

*:not(input) {
  user-select: none;
}

The above basically disable text selection on all elements, which during my testing disallowed zooming on webpage. FYI: I haven't dived deep into details, just stating its effects.

Disable zoom on web-view react-native?

9 Answers9

Linked

Related