Disable zoom on web-view react-native?

android ios webview react-native hybrid-mobile-app

33,091

Solution 1

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">

Solution 2

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
 />

Solution 3

Try scalesPageToFit={false} more info in here

Solution 4

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={() => {}}
/>

Solution 5

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

View more solutions

33,091

Author by

Amal p

Updated on November 05, 2020

Comments

Amal p over 3 years

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>

Smit Thakkar about 6 years

how do you add such header? inside source ? can you please give an example?
shahonseven about 6 years

@Smit - put in in the webpage's header.
Smit Thakkar about 6 years

Hi, thanks a lot for the reply. Well, it's still not giving the desired output. <View pointerEvents="none" style={{height: HEIGHT, width: WIDTH}}> <WebView source={{ uri: URL }} scrollEnabled={false} /> </View> Also I wasn't able to touch any buttons on webpage while using pointerEvents="none" Check out the output here: files.slack.com/files-tmb/T02UA0972-FAG2SRTDW-b99f2fb411/… Desire output - files.slack.com/files-tmb/T02UA0972-FAFFBFFTJ-d0082bba5e/…
Smit Thakkar about 6 years

Thanks for quick reply. How can we insert this code into other webpage's header? are you suggesting below? <WebView source={{ uri: URL, html:'<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">' }} /> sorry if I am doing it wrong but feel free to correct me.
Dinith Minura over 5 years

Had to remove 'width=device-width' in my case. You saved my time. Thanks.
Amal p over 5 years

yes, the values have to be changed according to your requirements.
Daniel over 4 years

hi, why is the maximum scale 0.99 instead of 1?
obai over 4 years

Add the meta tag in your index.html (you can find it in your reactproject/public folder
Ajay almost 4 years

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?
Elendurwen over 3 years

This would only apply if you had control over the shown web page and thus doesn't answer the question.
Devmaleeq almost 3 years

Wow wow wow. This is a very clean option for maintaining screen size on mobile
xpcrts AKA Rithisak over 2 years

Using meta tag above show blank screen, is there any solution yet?
grenos about 2 years

I've signed only to comment that this is the only solution that worked for me!