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>
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">
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
/>
Try scalesPageToFit={false} more info in here
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
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>
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.
Put this attribute to Webview pointerEvents="none" , or wrap the Webview by other view with this attribute.
