在 WKWebView 中禁用放大手势

Question

我正在寻找一种在 WKWebView 的 iOS 实现上禁用“捏合缩放”放大手势的方法。 有一个可用于 OS X 的放大 BOOL 属性，但它似乎不适用于 iOS。

WKWebView.h

#if !TARGET_OS_IPHONE
/* @abstract A Boolean value indicating whether magnify gestures will
 change the web view's magnification.
 @discussion It is possible to set the magnification property even if
 allowsMagnification is set to NO.
 The default value is NO.
 */
@property (nonatomic) BOOL allowsMagnification;

我也试过查看 WKWebView 的手势识别器，但这似乎变成了一个空数组。 我假设实际的识别器在组件的结构中更深（从它的外观来看相当复杂），并且如果可能的话宁愿不去挖掘它们。

我知道可能的黑客攻击可能会禁用手势触发（有选择地将手势传递给 WebView，添加子视图以捕获捏合手势等），但我总是发现那些会在事件中引入延迟并希望保持实现为尽可能干净/无黑客。

Answer 1

您可以通过设置 WKWebKit 的 UIScrollView 的委托并实现viewForZooming(in:)来防止用户缩放，如下所示：

class MyClass {
    let webView = WKWebView()

    init() {
        super.init()
        webView.scrollView.delegate = self
    }

    deinit() {
        // Without this, it'll crash when your MyClass instance is deinit'd
        webView.scrollView.delegate = nil
    }
}

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

Answer 2

以下答案不再适用于 iOS 10 测试版。

为了提高 Safari 中网站的可访问性，即使网站在视口中设置了 user-scalable=no，用户现在也可以双指缩放。

---

WKWebView 似乎以与 Mobile Safari 相同的方式尊重视口元标记（正如预期的那样）。 所以，我发现在页面加载后通过 javascript 将该标签注入到 DOM 中。 我会厌倦这个解决方案，除非你确切地知道什么 HTML 正在加载到 webview 中，否则我怀疑它会产生意想不到的后果。 就我而言，我正在加载 HTML 字符串，因此我可以将其添加到应用程序随附的 HTML 中。

要对任何网页进行一般性操作：

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
    NSString *javascript = @"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=no');document.getElementsByTagName('head')[0].appendChild(meta);";
    
    [webView evaluateJavaScript:javascript completionHandler:nil];
}

看看刚刚完成的导航类型可能是明智的，因为只有新页面需要执行此 javascript。

Answer 3

我曾尝试将UIScrollView minimumZoomScale和maximumZoomScale属性设置为1或将UIView isMultipleTouchEnabled属性设置为false或通过调用UIScrollViewDelegate viewForZooming(in:)返回nil但没有任何效果。 就我而言，经过多次反复试验，以下在我的情况下有效[在 iOS 10.3 上测试]：

class MyViewController: UIViewController {
   var webView: WKWebView?

   override viewDidLoad() {
      super.viewDidLoad()

      //...
      self.webView.scrollView.delegate = self
      //...
   }
}

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

Answer 4

在 Swift 中禁用 WkWebView 缩放的完整工作代码。

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {
    var webView : WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration:webConfiguration)
        webView.uiDelegate = self

        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)
        webView.configuration.userContentController.addUserScript(script)

        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        let myUrl = URL(string: "https://www.google.com")

        let myRequest = URLRequest(url: myUrl!)
        webView.load(myRequest)
    }
}

Answer 5

本机解决方案对我不起作用，注入 JS 并不理想。 我注意到，当发生缩放并调用我的委托时，即使我在初始化 webview 时禁用了 pinchGestureRecognizer，它也会启用。 为了解决这个问题，我在缩放开始时将其设置为禁用：

extension ViewController: UIScrollViewDelegate {

    // disable zooming in webview
    func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
        scrollView.pinchGestureRecognizer?.isEnabled = false
    }
}

Answer 6

Landschaft 的完整Swift 3 / iOS 10版本的答案：

import UIKit
import WebKit

class MyViewController: UIViewController, UIScrollViewDelegate {

    var webView = WKWebView()

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

    // Disable zooming in webView
    func viewForZooming(in: UIScrollView) -> UIView? {
        return nil
    }
}

Answer 7

您可以为此使用 UIScrollViewDelegate。 首先在 viewDidLoad() 或任何其他合适的方法中将委托分配给您的 webview：

class LoginViewController: UIViewController, WKUIDelegate, UIScrollViewDelegate {

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

  //Add this delegate method in your view controller
  func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
      scrollView.pinchGestureRecognizer?.isEnabled = false
  }
}

Answer 8

如果您显示本地 html，您只需修改此 html 并将此元标记放入您的 html：

<head>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
</head>

Answer 9

防止缩放的简单方法

override func viewDidLoad() {
    super.viewDidLoad()

    webView.scrollView.delegate = self
}

func scrollViewDidZoom(_ scrollView: UIScrollView) {

    scrollView.setZoomScale(1.0, animated: false)
}

Answer 10

斯威夫特 2.0

extension WKWebView {
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        return nil
    }
}

Answer 11

如果处理 html 中的链接对您来说并不重要（假设您只想显示文本），最简单的方法是关闭用户交互webView.userInteractionEnabled = false

Answer 12

这就是我为一个 webview-only 应用程序禁用Swift3视图控制器缩放的方式

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, UIScrollViewDelegate {

    @IBOutlet var webView: WKWebView!

    override func loadView() {
        webView = WKWebView()
        webView.navigationDelegate = self
        view = webView
    }

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

    func viewForZooming(in: UIScrollView) -> UIView? {
        return nil;
    }    

}

Answer 13

我没有足够的声誉来为答案添加评论，但我想提一下 Kevin 的解决方案（元视口）在 iOS 10 测试版中不再适用。 不过，Landschaft 的解决方案对我有用！

由于 JS 解决方案使用 W3C 标准，因此应该始终支持它。

啊，凯文，我希望这些事情就是这样运作的。

更多信息： https : //stackoverflow.com/a/37859168/1389714

Answer 14

由于需要手势识别器失败，禁用双击以缩放手势。 当用户双击时，它将阻止浏览器采取行动。

 import UIKit class DisableDoubleTapRecognizer : UITapGestureRecognizer, UIGestureRecognizerDelegate{ override init(target: Any?, action: Selector?) { super.init(target: target, action: action) } init() { super.init(target:nil, action: nil) self.numberOfTapsRequired = 2; self.delegate = self; } func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRequireFailureOf otherGestureRecognizer: UIGestureRecognizer) -> Bool { return true; } } //in your view controller override func viewDidLoad() { super.viewDidLoad() webView.addGestureRecognizer(DisableDoubleTapRecognizer()) }

Answer 15

这是Gulshan Kumar答案的略微修改版本，在 iOS 12.1.2 中对我有用，它还可以防止由于双击和旋转而导致缩放。 在我的示例中，我只是将脚本直接注入到 Web 视图中。 我将比例调整为 60%，在构建源字符串时无需使用连接。

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

let script = WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

webView.configuration.userContentController.addUserScript(script)

Answer 16

我们需要在 XCode 8 中使用以下签名更改委托调用：

覆盖 func viewForZooming(in scrollView: UIScrollView) -> UIView? {返回零}

Answer 17

我工作的应用程序需要通过 Javascript 缩放视图。 接受的答案也阻止了 JavaScript 从页面内部进行缩放。 我只需要禁用应用程序用户的捏合手势。 我发现的唯一解决方案是在页面加载后禁用 web 视图的手势：

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    /* disable pinch gesture recognizer to allow zooming the web view by code but prevent zooming it by the user */
    for (UIGestureRecognizer *gr in self.webView.scrollView.gestureRecognizers) {
        if ([gr isKindOfClass:[UIPinchGestureRecognizer class]]) {
            gr.enabled = NO;
        }
    }
}

Answer 18

如果在网页加载完成后取消缩放缩放效果更好，并且还可以指定要取消缩放的特定网址

public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
     if let url = webView.url, url.absoluteString == "***" {                       
        webView.scrollView.pinchGestureRecognizer?.isEnabled = false
     }

    print("finish")
} 

Answer 19

这对我有用。 https://gist.github.com/paulofierro/5b642dcde5ee9e86a130

  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 20

如果 webview 是用于只读目的的用户，即仅用于显示 web 内容使用

webView.isUserInteractionEnabled = false

这样缩放手势就不起作用了。