在 web-view react-native 上禁用缩放？

Question

如何在 react-native web-view 上禁用缩放，有没有属性像 hasZoom={false}（只是一个例子）可以包含在下面 web-view 标签可以禁用缩放。它必须同时适用于 android 和 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>

Answer 1

在 here

中尝试 scalesPageToFit={false} 更多信息

Answer 2

对于以后的任何人，我通过添加以下 css 解决了这个问题：

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

以上基本上禁用了所有元素的文本选择，在我的测试期间不允许在网页上缩放。仅供参考：我没有深入细节，只是说明它的效果。

Answer 3

认为这可能对其他人有帮助，我通过在 html <head> 部分添加以下内容解决了这个问题：

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

Answer 4

我可以通过将 WebView 包装在 View 中并设置一些道具来禁用缩放、文本选择和其他指针事件：

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

Answer 5

想要清晰思路的人:

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

Answer 6

有点老套但是很管用

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,
          })
        }}
      />

备注初始比例=1，最大比例=0.99，用户可扩展=0

Answer 7

如果您正在使用 WKWebView - scalesPageToFit 道具不起作用。你可以检查这个issue here that will lead you to this one

现在要完成你想要的，你应该使用 injectedJavascript 道具。但是还有其他描述 here

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

这花了我一些时间才发现。所以最后你有这样的东西：

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

在 web-view react-native 上禁用缩放？

Disable zoom on web-view react-native?

android

webview

ios

hybrid-mobile-app

react-native