在 React Native 中禁用 WebView 中的缩放或 react-native-wkwebview

Question

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

Answer 1

在 webview 中呈现的文档头部中，坚持使用此元：

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

您可以将其注入到您的网络视图中。

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

在 React Native 中禁用 WebView 中的缩放或 react-native-wkwebview

Disable zoom in WebView or react-native-wkwebview in React Native

ios

wkwebview

react-native