在 React Native 中禁用放大 WebView 或 react-native-wkwebview答案

【问题标题】：Disable zoom in WebView or react-native-wkwebview in React Native在 React Native 中禁用放大 WebView 或 react-native-wkwebview
【发布时间】：2018-03-06 00:08:50
【问题描述】：

有没有办法在 iOS 的 WKWebView 和 android 的 WebView 中禁用缩放？我正在使用 react-native-wkwebview-reborn。

【问题讨论】：

标签： ios react-native wkwebview

【解决方案1】：

在 webview 中呈现的文档的头部粘贴在这个 meta 中：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

例子：

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    </head>
    <body>

    </body>
</html>

您可以将其注入到您的 webview 中。

const SCRIPT = `
const meta = document.createElement('meta');
meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
meta.setAttribute('name', 'viewport');
document.head.appendChild(meta);
`;

<WebView injectedJavaScript={SCRIPT} />

【讨论】：

很遗憾，我无法访问源页面。
@Peyotle 您可以使用 injectedJavaScript 属性注入它。在那里注入添加此元的javascript。我在上面添加了操作方法。
感谢您的回答。我不得不改变一些东西才能让它工作，但这很有帮助。我将第一个属性名称更改为“内容”并将 Meta 添加到头部。这是更新后的脚本： const SCRIPT = ` const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `
是的，这是一个明显的错字，因为那个错字不在我提供的 html 块中。我修好了。你还需要改变什么？显然，您还必须将其附加到 document.head.appendChild(meta) 的开头。我编辑了这些更改。在我在这里展示之前你不熟悉createElement 吗？当页面加载到 webview 中的另一个页面时，您的 injectedJavascript 是否重新执行？