如何在 macOS 上使用 WKWebView 支持像 Safari 一样缩放

Question

在 Safari 中，用户可以使用缩放命令（如 Command +）放大内容。这不仅会放大内容（包括字体大小），还会调整内容以保持在 window 边距之间。

我想在 macOS 上使用 WKWebView 实现相同的功能，但我不知道在 Web 视图控件上使用 loadRequest() 命令时如何实现。

我试过以下方法，但没有成功：

像 "document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust='150%'" 一样注入 javascript。 macOS 版本的 WKWebView 似乎不再支持 webkitTextSizeAdjust，请参阅 https://trac.webkit.org/changeset/145168/webkit。
使用magnification属性。这可行，但这只是放大（或最小化）所有内容，而不像 Safari 那样调整内容以保持在控件宽度（视口）之间。

请注意，我使用的是 loadRequest()，而不是 loadHTMLString()。

Answer 1

我遇到了同样的问题，并找到了解决办法。您需要为 WkWebView 配置设置 JavaScript 代码注入。需要在JavaScript代码中设置刻度数。

完整代码如下：

NSString *jScript = @"document.body.style.zoom = 0.8";
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];

WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = wkUController;

WKWebView *webContentView = [[WKWebView alloc] initWithFrame:NSMakeRect(0, 0,sizeWidth, sizeHeight) configuration:configuration];

Answer 2

作为注入 javascript 的替代方法，如 @elsonpeng 接受的答案中所述，您还可以随时调整缩放级别，如下所示 (Swift):

webView.evaluateJavaScript("document.body.style.zoom = 1.5", completionHandler: nil)

这当然也可以与WKNavigationDelegate结合使用，当页面完全加载时执行脚本：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("document.body.style.zoom = 1.5", completionHandler: nil)
}

这种方法更灵活一些，但比代码注入要慢一些，具体取决于您加载的页面的复杂性。

如何在 macOS 上使用 WKWebView 支持像 Safari 一样缩放

How to support Zoom like Safari with WKWebView on macOS

macos

wkwebview