禁用缩放 web-view react-native？答案

【问题标题】：Disable zoom on web-view react-native?禁用缩放 web-view react-native？
【发布时间】：2017-11-21 09:09:36
【问题描述】：

如何在react-nativeweb-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>

【问题讨论】：

您是否找到任何解决方案来避免在 RN 中双击 iOS 和 Android 时放大？
我认为这是 github 上报告的问题 ..github.com/facebook/react-native/issues/10536 看看这个
这可能会对您有所帮助。 stackoverflow.com/questions/50110920/…

标签： android ios webview react-native hybrid-mobile-app

【解决方案1】：

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

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

【讨论】：

如何添加这样的标题？内源？可以举个例子吗？
@Smit - 放入网页的标题中。
感谢您的快速回复。我们如何将此代码插入其他网页的标题中？你在下面建议吗？ <WebView source={{ uri: URL, html:'<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">' }} /> 抱歉，如果我做错了，请随时纠正我。
在 index.html 中添加 meta 标签（您可以在 reactproject/public 文件夹中找到它
这仅适用于您可以控制显示的网页并因此无法回答问题的情况。

【解决方案2】：

对于那些想要明确想法的人：

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

【讨论】：

在我的情况下必须删除 'width=device-width'。你节省了我的时间。谢谢。
是的，必须根据您的要求更改值。

【解决方案3】：

试试scalesPageToFit={false}here了解更多信息

【讨论】：

哇哇哇。这是在移动设备上保持屏幕大小的一个非常干净的选项

【解决方案4】：

小东西，但它的工作原理

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

【讨论】：

嗨，为什么最大比例是0.99而不是1？
嗨！您的解决方案仅适用于 android。不在 iOS 中。你对iOS有什么想法吗？如何在 iOS 中也禁用双指缩放功能？

【解决方案5】：

如果您使用 WKWebView - scalesPageToFit 属性不起作用。你可以查看这个issue here，它将引导你到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={() => {}}
/>

【讨论】：

【解决方案6】：

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

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

【讨论】：

您好，非常感谢您的回复。好吧，它仍然没有提供所需的输出。 <View pointerEvents="none" style={{height: HEIGHT, width: WIDTH}}> <WebView source={{ uri: URL }} scrollEnabled={false} /> </View> 另外，我在使用pointerEvents="none" 时无法触摸网页上的任何按钮@ 在这里查看输出：files.slack.com/files-tmb/T02UA0972-FAG2SRTDW-b99f2fb411/… Desire output - files.slack.com/files-tmb/T02UA0972-FAFFBFFTJ-d0082bba5e/…

【解决方案7】：

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

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

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

【讨论】：