Question

我有WkWebview应该显示HTML电子邮件的内容。问题是有时内容比窗口大，因此需要用户滚动才能看到完整的电子邮件。

是否可以避免这种情况并且具有与默认iOS邮件应用程序相似的行为？事实上，在Mail应用程序中，无论电子邮件的类型如何，内容似乎都是合适的。

Answer 1

您可以在加载网页后添加此代码来实现此目的。那就是在函数末尾func webView（_ webView：WKWebView，didFinish navigation：WKNavigation！）

let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
    let userScript = WKUserScript(source: jscript, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
    let wkUController = WKUserContentController()
    wkUController.addUserScript(userScript)
    let wkWebConfig = WKWebViewConfiguration()
    wkWebConfig.userContentController = wkUController
    let yourWebView = WKWebView(frame: self.view.bounds, configuration: wkWebConfig)// yourwebview is the webview that you are using.

Answer 2

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

    NSString *source = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

    WKUserScript *script = [[WKUserScript alloc] initWithSource:source injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    [configuration.userContentController addUserScript:script];

    self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];

Answer 3

如果您可以缩放内容，可以禁用滚动并禁用蒙版自动转换，并设置NSLayoutConstraint以使内容符合您想要的大小。

以下示例使用1：1的宽高比将“超大”html文档缩放到屏幕宽度的80％。它垂直约束位于靠近屏幕底部的位置。当然，用你需要的大小替换约束。

let configuration = WKWebViewConfiguration()
webView = WKWebView(frame: self.view.frame, configuration: configuration)
webView.translatesAutoresizingMaskIntoConstraints = false
webView.scrollView.isScrollEnabled = false

let height = NSLayoutConstraint(item: self.webView, attribute: .height, relatedBy: .equal, toItem: self.view, attribute: .width, multiplier: 0.8, constant: 0)
let width = NSLayoutConstraint(item: self.webView, attribute: .width, relatedBy: .equal, toItem: self.view, attribute: .width, multiplier: 0.8, constant: 0)

let horizontalCenter = NSLayoutConstraint(item: self.webView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1.0, constant: 0.0)
let bottomOffset = self.webView.frame.size.width * 0.1
let bottomConstraint = NSLayoutConstraint(item: self.bottomLayoutGuide, attribute: .top, relatedBy: .equal, toItem: self.webView, attribute: .bottom, multiplier: 1.0, constant: bottomOffset)

self.view.addConstraints([height, width, horizontalCenter, bottomConstraint])

Answer 4

<强>夫特

Similar to @nferocious76's but in Swift language

var scriptContent = "var meta = document.createElement('meta');"
scriptContent += "meta.name='viewport';"
scriptContent += "meta.content='width=device-width';"
scriptContent += "document.getElementsByTagName('head')[0].appendChild(meta);"

webView.evaluateJavaScript(scriptContent, completionHandler: nil)

目标C

NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];

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

wkWebV = [[WKWebView alloc] initWithFrame:self.view.frame configuration:wkWebConfig];

使用WkWebview强制HTML内容适合设备宽度

4 个答案: