WKWebview 中的动态类型与设置不匹配
Posted
技术标签:
【中文标题】WKWebview 中的动态类型与设置不匹配【英文标题】：Dynamic type in WKWebview not matching settings 【发布时间】：2021-02-21 01:06:21 【问题描述】：我正在开发一个 SwiftUI ios 应用程序，并且我有一个加载本地 html 文件和 CSS 的 WKWebView。我将-apple-system 字体与iu-rounded 和ui-sans-serif 系列一起使用，但是当我进入设置并在设置中将字体大小更改为更大时，页面上的字体保持不变（动态类型不会调整)，即使在重新启动应用程序后，字体也始终相同（应用程序的其余字体按预期更改）。
确实会应用字体系列，但不会应用大小。
我如何将 WKWebview 添加到 SwiftUI：
import SwiftUI
import WebKit
struct WebView : UIViewRepresentable
func makeUIView(context: Context) -> WKWebView
return WKWebView()
func updateUIView(_ uiView: WKWebView, context: Context)
if let url = Bundle.main.url(forResource: "help", withExtension: "html")
uiView.loadFileURL(url, allowingReadAccessTo: url.deletingLastPathComponent())
struct HelpView: View
@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var body: some View
//some other stuff here (a title and a dismiss button)
WebView()
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Help</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- A bunch of HTML here-->
<h2>Some headings</h2>
<p>And some text in paragraphs and lists</p>
</body>
</html>
CSS：
:root
color-scheme: light dark;
--background:#ffffff;
--text: #212121;
--accent: #6C10EA;
html
font:-apple-system-body;
body
background-color: var(--background);
line-height: 1.4;
font-family: ui-sans-serif;
h2
font:-apple-system-largetitle;
font-family:ui-rounded;
img
max-width: 100%;
@media screen and (prefers-color-scheme: dark)
:root
--background:#171619;
--text: #F3EBFF;
--accent: #9140FF;
【问题讨论】：
【参考方案1】：如果有人遇到同样的问题，我可以通过将当前正文文本大小传递给 HTML 并将其设置为默认值来模仿它。只需确保您的其他字体使用相对字体大小 (em)，以便在您更改正文字体大小时它们会增加大小：
添加网页视图的代码：
import SwiftUI
import WebKit
struct WebView : UIViewRepresentable
func makeUIView(context: Context) -> WKWebView
return WKWebView()
func updateUIView(_ uiView: WKWebView, context: Context)
let bodySize = UIFont.preferredFont(forTextStyle: UIFont.TextStyle.body).pointSize
if let url = Bundle.main.url(forResource: "help", withExtension: "html"), let param = URL(string: "?size=\(bodySize)", relativeTo: url)
uiView.loadFileURL(param, allowingReadAccessTo: url.deletingLastPathComponent())
struct HelpView: View
@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var body: some View
// Other content here
WebView()
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Help</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Some Headings</h2>
<p>Some content</p>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const size = urlParams.get('size');
document.body.style.fontSize = size + "px";
</script>
</body>
</html>
【讨论】：
以上是关于WKWebview 中的动态类型与设置不匹配的主要内容，如果未能解决你的问题，请参考以下文章