WKWebview 中的动态类型与设置不匹配答案

【问题标题】：Dynamic type in WKWebview not matching settingsWKWebview 中的动态类型与设置不匹配
【发布时间】：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;
  }
}

【问题讨论】：

标签： swiftui wkwebview

【解决方案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>

【讨论】：