WKWebView 禁用缩放？

Question

有人知道在 WKWebView 中禁用双击和捏合缩放的简单方法吗？我尝试过的任何方法都不起作用：

Webview.scrollView.allowsMagnification = false;    // Error: value of type WKWebView has no member allowsMagnification

Webview.scrollView.isMultipleTouchEnabled = false; // doesn't do anything

在 html 中：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> // pile of crap, does nothing

Answer 1

您必须在脚本中添加最大比例。

以下代码应该对您有帮助：

let source: String = "var meta = document.createElement('meta');" +
    "meta.name = 'viewport';" +
    "meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';" +
    "var head = document.getElementsByTagName('head')[0];" +
    "head.appendChild(meta);"

let script: WKUserScript = WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
let userContentController: WKUserContentController = WKUserContentController()
let conf = WKWebViewConfiguration()
conf.userContentController = userContentController
userContentController.addUserScript(script)
let webView = WKWebView(frame: CGRect.zero, configuration: conf)

Answer 2

好的，这就是我解决这个问题的方法：

wkWebView.configuration.userContentController.addUserScript(self.getZoomDisableScript()) 

private func getZoomDisableScript() -> WKUserScript {
    let source: String = "var meta = document.createElement('meta');" +
        "meta.name = 'viewport';" +
        "meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';" +
        "var head = document.getElementsByTagName('head')[0];" + "head.appendChild(meta);"
    return WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
}   

Answer 3

斯威夫特 4：

@IBOutlet weak var webView: WKWebView!

override func viewDidLoad() {
         super.viewDidLoad()
         self.webView.scrollView.delegate = self
}

//MARK: - UIScrollViewDelegate
func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
         scrollView.pinchGestureRecognizer?.isEnabled = false
}

Answer 4

网页解决方案1

这篇文章解释了如何管理缩放。

WebKit：iOS 10 中的新交互行为

在 iOS 10 中“ignoresViewportScaleLimits”属性被添加到 WKWebViewConfiguration，默认情况下为 false。该帖子建议设置为 true 并正确管理页面的缩放。

注意：在 Safari 和 SafariViewController 中，此属性的值默认为 true。

就我而言，我想在某些情况下重置缩放。为此，我发现将最大比例更改为 1.0，然后更改为 10.0。

NSString* js =
    @"var meta = document.createElement('meta'); " \
    "meta.setAttribute( 'name', 'viewport' ); " \
    "meta.setAttribute( 'content', 'width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = yes' ); " \
    "document.getElementsByTagName('head')[0].appendChild(meta)";
[_wkWebview evaluateJavaScript:js completionHandler:^(id _Nullable object, NSError * _Nullable error) {
    NSString* js =
    @"var meta = document.createElement('meta'); " \
    "meta.setAttribute( 'name', 'viewport' ); " \
    "meta.setAttribute( 'content', 'width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 10.0, user-scalable = yes' ); " \
    "document.getElementsByTagName('head')[0].appendChild(meta)";
    [_wkWebview evaluateJavaScript:js completionHandler:nil];
}];

这段代码应该可以工作，但我建议始终在 html 中创建“视口”，并在 javascript 中创建一个函数（即 resetZoom 或disableZoom）以直接从 Objective-C 调用它（它更干净）

希望有帮助。

文件URL解决方案2

覆盖滚动视图委托：

class ViewController: UIViewController {
    let webView = WKWebView()
    
    init() {
        super.init()
        webView.scrollView.delegate = self
    }
    
    deinit() {
        // To prevent crash when ViewController is deinitialized
        webView.scrollView.delegate = nil
    }
}

extension ViewController: UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return nil
    }
}

Answer 5

适用于 iOS 13

NSString *javascript = @"var meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');document.getElementsByTagName('head')[0].appendChild(meta);";
// you should use WKUserScript, `evaluateJavaScript` is not working
WKUserScript *us = [[WKUserScript alloc] initWithSource:javascript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];[wkWebView.configuration.userContentController addUserScript:us];

不工作

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return nil;
}

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view {
    scrollView.pinchGestureRecognizer.enabled = NO;
}

Answer 6

无法找到通过双击完全禁用缩放的正确方法，但这里有一个足以满足我的用例的解决方法：

private var zoomScale: CGFloat? = nil

func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
    zoomScale = scrollView.zoomScale

    // And use the same solution to prevent pinch to zoom as in other answers
    scrollView.pinchGestureRecognizer?.isEnabled = false
}
    
func scrollViewDidZoom(_ scrollView: UIScrollView) {
    if let originalScale = zoomScale {
        scrollView.zoomScale = originalScale
    }
}

它只是在缩放开始之前存储zoomScale，然后在缩放完成后立即重置它，从而导致一点点移动。

Answer 7

添加以下代码将修复 WKWebView 的所有缩放问题。这会禁用滚动视图的缩放选项，因此无需处理滚动视图委托或点击委托。需要注意的一点是在 WKWebView 的 init 中添加此配置。稍后将配置设置到 wkwebview 将不起作用。

let source: String = "var meta = document.createElement('meta');" + "meta.name = 'viewport';" + "meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';" + "var head = document.getElementsByTagName('head')[0];" + "head.appendChild(meta);";
let script: WKUserScript = WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
let userContentController: WKUserContentController = WKUserContentController()
let conf = WKWebViewConfiguration()
conf.userContentController = userContentController
userContentController.addUserScript(script)
        
webView = WKWebView(frame: CGRect.zero, configuration:conf)

此外，您可以添加以下代码行以在单击任何文本字段时禁用网页的垂直滚动。

webView.scrollView.isScrollEnabled = false