swift WKWebView 加载内容的文字两端对齐，和图片全屏处理

本文介绍如何使用 WKWebView 实现 HTML 内容的自适应布局，并通过 JavaScript 动态调整页面样式，包括背景色、字体颜色、字体大小等，确保良好的阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先编辑一个header，确定屏幕的放大倍数为1，并且固定。

let headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></header>";

2、设置全局颜色固定图片宽度，可以自己调节，这里我使用的是UIScreen.main.bounds.width-20，文字两端对齐使用的是style=\"text-align:justify; text-justify:inter-ideograph; \"，其中content是后台返回的内容，整体代码如下：

let text = headerString + "<head><style>img{width:\(UIScreen.main.bounds.width-20)px !important;}</style></head><body><div style=\"text-align:justify; text-justify:inter-ideograph; \">" + content + "</div></body>"

至此后台返回数据改造完成，完整工具代码：

static func htmlAddStyle(content:String) -> String{
     let headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></header>";
     let text = headerString + "<head><style>img{width:\(UIScreen.main.bounds.width-20)px !important;}</style></head><body><div style=\"text-align:justify; text-justify:inter-ideograph; color:#7E0000;\">" + content + "</div></body>"
     return text
}

3、WKWebView自适应高度

配置WKWebView

self.webview.scrollView.isScrollEnabled = false
self.webview.navigationDelegate = self

添加监测：

self.webview.scrollView.addObserver(self, forKeyPath: "contentSize", options: NSKeyValueObservingOptions.init([.new]), context: nil)

移除监测：

self.webview.scrollView.removeObserver(self, forKeyPath: "contentSize")

开始监测

override  func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
     if keyPath == "contentSize"{
         let height = self.webview.scrollView.contentSize.height
         self.contentHeight.constant = height
         self.webview.frame = self.contentSupview.bounds
         Log("高度改变:\(height)")
     }
 }

4、WKWebView加载页面

self.webview.loadHTMLString(Tool.htmlAddStyle(content: data?.content ?? ""), baseURL: nil)

5、调整修改样式

//MARK: - WKNavigationDelegate
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("document.body.style.backgroundColor=\"#F9F9F9\";", completionHandler: nil)                                                  webView.evaluateJavaScript("document.documentElement.style.webkitUserSelect='none';", completionHandler: nil)
    webView.evaluateJavaScript("document.activeElement.blur();", completionHandler: nil)
    webView.evaluateJavaScript("document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#171717'", completionHandler: nil)
    webView.evaluateJavaScript("document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '105%'", completionHandler: nil)
}

下面单独分解功能

修改背景色：

webView.evaluateJavaScript("document.body.style.backgroundColor=\"#F9F9F9\";", completionHandler: nil)

禁止选择：

webView.evaluateJavaScript("document.documentElement.style.webkitUserSelect='none';", completionHandler: nil)
webView.evaluateJavaScript("document.activeElement.blur();", completionHandler: nil)

修改字体颜色：

webView.evaluateJavaScript("document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#171717'", completionHandler: nil)

调整字体大小

webView.evaluateJavaScript("document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '105%'", completionHandler: nil)

至此结束，实现效果如下：