logo标签列表

禁用React Native中WebView的缩放功能？

androidioswebviewreact-nativehybrid-mobile-app
45
如何在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上双击缩放的问题吗？ - Sujit
我认为这是在 Github 上报告的问题.. https://github.com/facebook/react-native/issues/10536 看看这个。 - Najam
这可能会帮助你。 https://dev59.com/Eavka4cB1Zd3GeqPmwcP#50127083 - Smit Thakkar
9个回答
72

想必这对其他人也有帮助，我通过在html <head> 部分添加以下内容来解决这个问题：

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

@Smit - 把它放在网页的头部。 - shahonseven
3
谢谢您的快速回复。我们如何将此代码插入到其他网页的头部？您是否建议以下方式？ <WebView source={{ uri: URL, html:'<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">' }} />如果我做错了，请原谅并请您指出。 - Smit Thakkar
1
在你的index.html中添加meta标签（你可以在你的reactproject/public文件夹中找到它）。 - obai
6
只有当你可以控制显示的网页时，这才适用，因此这并不能回答这个问题。 - Lenka Pitonakova
使用位于上方的元标记显示空白屏幕，是否已经有解决方案了？ - Chanrithisak Phok
显示剩余2条评论
31

为那些希望清晰了解的人提供：

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
 />
1
我在这种情况下不得不删除“width=device-width”。你节省了我的时间。谢谢。 - Dinith Minura
1
是的，这些值必须根据您的要求进行更改。 - Amal p
13

尝试使用scalesPageToFit={false}，更多信息请参见此处

1
哇，这是在移动设备上保持屏幕尺寸的非常干净的选项。 - Devmaleeq
12

如果您正在使用WKWebView，那么scalesPageToFit属性将不起作用。您可以在此处查看该问题，它会引导您到此处

现在，为了实现您想要的效果，您应该使用injectedJavascript属性。但还有一些其他内容，请参见此处

请确保设置一个onMessage处理程序，即使它是no-op，否则代码将不会运行。

这让我花费了一些时间才发现。因此，最终您会得到像这样的东西:

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={() => {}}
/>
2
我只是签名评论说，这是唯一有效的解决方案！ - grenos
10

虽然有点取巧，但它能正常工作

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.99 而不是 1？ - Donni
你好！你的解决方案只在Android上有效，而在iOS上无法使用。你有关于iOS的任何想法吗？如何在iOS中禁用捏合缩放？ - Ajay
5

我也遇到了这个问题，解决方法是在WebView组件中使用setBuiltInZoomControls={false}属性。

例如：

<WebView
   /*all prop to use*/ 
   setBuiltInZoomControls={false}
/>

I hope that to be help

1
目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
这个答案正是我想要的，谢谢。我的需求是在Android上禁用捏合缩放和双击缩放。请参考这里。 - JiajiaGu
2

我可以通过将 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" 时，我无法触摸网页上的任何按钮。请查看此处的输出：https://files.slack.com/files-tmb/T02UA0972-FAG2SRTDW-b99f2fb411/screenshot_2018-05-01-19-15-14_1024.png期望的输出是这样的：https://files.slack.com/files-tmb/T02UA0972-FAFFBFFTJ-d0082bba5e/screenshot_2018-04-30-19-51-55_1024.png - Smit Thakkar
0
只需在webview中设置setBuiltInZoomControls={false}即可。
-2

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

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

以上代码基本上禁用了所有元素的文本选择功能，在我的测试中，这也阻止了网页缩放。顺便提一下：我没有深入研究细节，只是陈述其影响。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接