时间戳

首页 > 解决方案 > Webview 渲染，Swift

javascript - Webview 渲染，Swift

问题描述

我正在尝试在我的网络视图中呈现不同的 HTML。为了给你一个参考，我很想像电子邮件客户端一样呈现 html（其中 html 在屏幕中完美调整大小）。

这是我的代码：

 func makeUIView(context: Context) -> WKWebView {

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

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

    let wkController = WKUserContentController()

    wkController.addUserScript(userScript)

    let wkWebConfiguration = WKWebViewConfiguration()

    wkWebConfiguration.userContentController = wkController

    let webView = WKWebView(frame: .zero, configuration: wkWebConfiguration)

    webView.translatesAutoresizingMaskIntoConstraints = false

    if let htmlBody = htmlBody {
        webView.loadHTMLString(htmlBody, baseURL: nil)
    }

    webView.translatesAutoresizingMaskIntoConstraints = false

    webView.navigationDelegate = context.coordinator

    webView.scrollView.isScrollEnabled = false

    return webView
}

这工作得很好，但有时我有一些呈现非常小的 html。我在调查过程中发现了两种情况：

问题 1 => 有时 html 文本很长，所以 web 视图适应了这个长度，结果发现一切都变小了。如果我能够打破长线，我认为 html 应该可以很好地呈现。

问题 2 => 即使我注入了呈现全屏的可能性，一些 html（少量）也会呈现一些额外的空白空间。因此，文本很小。

我将此渲染与（例如）来自 Gmail 的电子邮件进行比较，其中 html 在屏幕上非常完美。

标签： javascripthtmliosswiftwebview

解决方案

这不是 IOS 或 WebView 问题 像客户端这样的电子邮件在涉及无法应用的 CSS 时总是很痛苦。为了获得更好的渲染，您不需要在 WebView 上做任何事情，但请查看这篇文章

在邮件客户端中，CSS 的工作方式与在正常渲染浏览器或移动浏览器上的工作方式不同，根本不支持某些 CSS 样式。

此外，这部分代码将调整 WebView 以适应您的内容，从而导致更小的元素

 webView.scrollView.isScrollEnabled = false

推荐阅读