WKWebView - 放大后内容不合适

Posted 2023-03-12

【中文标题】WKWebView - 放大后内容不合适

【英文标题】：WKWebView - content not fitting after magnification

【发布时间】：2018-05-10 18:27:23

【问题描述】：

我在设置放大属性时遇到了WKWebView 的问题。

我希望内容能够像在 Safari 中一样调整大小以适应它。但我无法做到这一点。将放大倍率设置为小于 1.0 的值时如下所示。

多余的空间没有被使用，并且出现了边距。在 Safari 中，缩小会导致文本和图像变小，但实际上会占用额外的空间。

我正在使用带有 XIB 文件的 InterfaceBuild 来连接视图。

另外，我在viewDidLoad 中启用了放大功能。

webView.allowsMagnification = YES;

我也尝试了以下方法，但没有成功：

webView.translatesAutoresizingMaskIntoConstraints = NO;
webView.autoresizesSubviews = NO;
webView.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable;

任何提示将不胜感激。

【问题讨论】：

您可以使用自动布局。这要容易得多。只需添加 4 个边距布局：顶部、左侧、底部和右侧。应该直截了当

Thx Tai，我尝试了自动布局，但它没有改变任何东西......得到相同的结果。只要我不放大或缩小，调整窗口大小在这两种情况下都可以正常工作。

如何放大和缩小？顺便说一句

为了缩放，我设置了 WKWebView 的放大属性。

您是否尝试加载其他网站？如果它加载正常，它可能只是它的网站。如果网站在标题标签中有这样的视口元标签<meta name="viewport" content="initial-scale=1.0" />，它应该可以工作。我还尝试使用 WKWebview 加载 apple.com，将放大倍率设置为 0.3，看起来不错。

【参考方案1】：

问题是WKWebView 的放大属性并没有像你想象的那样做。它的作用是将渲染的页面作为一个整体进行缩放（考虑获取位图或图像并调整其大小）。

您想要的是 Safari（和其他浏览器）具有的动态缩放功能，通常称为“缩放”。这与magnification 不同，因为它会缩放页面的布局。这会单独放大或缩小页面的字体大小、元素大小等。

没有像 Safari 那样缩放页面的本地（公共）API，但您可以利用 CSS zoom property 做几乎相同的事情。这是一个可以做到这一点的扩展：

extension WKWebView 

    func zoom(to zoomAmount: CGFloat) 
        evaluatejavascript("document.body.style.zoom = '\(zoomAmount)'", completionHandler: nil)
    

可以这样使用：

webView.zoom(to: 0.9)

【讨论】：

这样做的问题是它不会导致布局更新，只会使内容变小。这与在 Safari 或 chrome 中按 Cmd-+/- 不同

我不明白你的意思。这与CMD+ 或CMD- 的功能几乎相同。 （当然，您需要调整zoom(to:) 中的值）

是的，我已经这样做了，但是对于响应式网站，它不会重新布局内容，只会使其更小。例如，移动设备大小的布局不会变成桌面布局

@Jonathan。哦，那是不同的，但我明白你现在在寻找什么。您的解决方案可能是最好的（也是唯一的）方法。

【参考方案2】：

为了尽可能接近 Cmd +/- 在 Safari/Chrome 中的作用，我增加了 WKWebView 的框架，然后反向转换图层：

    var zoomLevel: CGFloat = 1

    private func didTapZoomOut() 
        zoomLevel -= 0.2
        needsLayout = true
    

    override func layout() 
        super.layout()
        webView.frame.size = CGSize(width: frame.width * (1/zoomLevel), height: frame.height * (1/zoomLevel))
        webView.layer?.transform = CATransform3DMakeScale(zoomLevel, zoomLevel, 1)
    

这也会导致滚动条缩小，但对于我的用例来说这并不重要。

【参考方案3】：

@mattsven 的答案似乎是正确的。这是他解决方案的客观 c 变体：

NSString *jsCommand = [NSString stringWithFormat:@"document.body.style.zoom = 1.5;"];
[[wkWebView evaluateJavaScript:jsCommand completionHandler:^(NSString *result, NSError *error) 
if(error != nil) 
    NSLog(@"Error: %@",error);
    return;


NSLog(@" Success");
];

好像WKWebView没有scalePagesToFit作为ios的UIWebView。

参考资料。onetwo