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

Question

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

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

Answer 1

类似于@nferocious76，但使用 Swift 语言

斯威夫特

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];

Answer 2

如果您可以缩放内容，您可以禁用滚动和禁用蒙版自动翻译，并设置 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 3

    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 4

您可以通过在网页加载后添加此代码来实现此目的。就是在这个函数末尾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.