WKWebView - 放大后内容不合适

问题描述 投票:4回答:3

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

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

enter image description here

不使用额外空间并出现边距。在Safari中缩小文本和图像大小的结果,但实际使用了额外的空间。

enter image description here

我正在使用InterfaceBuild和XIB文件连接视图。

enter image description here

enter image description here

enter image description here

此外,我在viewDidLoad启用放大。

webView.allowsMagnification = YES;

我也试过以下但没有成功:

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

任何提示都将非常感激。

objective-c cocoa wkwebview
3个回答
3
投票

为了接近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)
    }

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


2
投票

问题是WKWebView的放大属性并不像你想象的那样。它的作用是将渲染页面整体缩放(想想拍摄位图或图像并调整其大小)。

你想要的是Safari(和其他浏览器)拥有的动态扩展功能,通常称为“缩放”。这与magnification不同,因为它缩放了页面的布局。这会单独放大或缩小页面的字体大小,元素大小等。

没有本地(公共)API可以像Safari那样缩放页面,但是你可以利用CSS zoom property做同样的事情。这是一个扩展,就是这样:

extension WKWebView {

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

}

它可以像这样使用:

webView.zoom(to: 0.9)

1
投票

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

References.one two

© www.soinside.com 2019 - 2024. All rights reserved.