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

我有一个

WkWebview

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

---

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

您可以在加载网页后添加此代码来实现这一点。在函数末尾func webView（webView:WKWebView，didfish导航：WKNavigation！）

---

如果可以缩放内容，则可以禁用滚动和掩码自动翻译，并设置NSLAYOUTSCONSTRAINT以使内容适合所需的大小

下面的示例使用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])

---

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

---

不幸的是，这并不总是有效的，例如，如果你有一个固定大小的图像大于屏幕大小。你节省了我的一天，谢谢：-）请不要写代码转储的答案，如果你的代码解决了问题，写一些关于你的代码的解释。不起作用。很多HTML内容可以有固定宽度的元素。例如，想象一个宽度为600的“td”元素。需要处理所有此类情况的解决方案。我们无法禁用滚动。这是一个示例用例-呈现电子邮件正文的iOS邮件应用程序。同样地，我们应该能够以一种适合范围的方式呈现任何html内容。它如何处理具有固定宽度的元素？

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)

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