发表新帖
发表新帖

Disable zoom on web-view react-native?

后端 未结
关注
7 1696
死守一世寂寞
死守一世寂寞 2021-01-01 12:22

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 bel

相关标签:
7条回答
  • 星月不相逢
    2021-01-01 12:41

    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>
    0 讨论(0)
  • 执笔经年
    2021-01-01 12:42

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

    0 讨论(0)
  • 甜味超标
    2021-01-01 12:43

    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
 />
    0 讨论(0)
  • 暖寄归人
    2021-01-01 12:45

    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

    0 讨论(0)
  • 天涯浪人
    2021-01-01 12:48

    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.

    0 讨论(0)
  • 执笔经年
    2021-01-01 12:56

    Try scalesPageToFit={false} more info in here

    0 讨论(0)
 看不清?
提交回复
热议问题