SwiftUI中iPad与iPhone字体显示不一致问题解决

问题根源 #

1. SwiftUI的.font()修饰符无法作用于WKWebView内部的HTML内容，你加在HTMLView上的字体设置完全无效。
2. CSS中使用固定像素（px）作为字体单位，不同设备像素密度（PPI）不同，导致视觉大小不一致。
3. HTML未配置视口（viewport）元标签，WKWebView默认按桌面端视口渲染，引发跨设备布局差异。
4. CSS代码存在冗余（比如.header类重复定义font-size和display），可能导致样式冲突。

解决方案 #

1. 移除SwiftUI侧无效的字体修饰符 #

直接删掉HTMLView上的.font()和.fontWeight()修饰符，它们无法影响WKWebView内部内容：

// 修改后
HTMLView(html: vm.wordMeanings(keyword: word) ?? "")
    .frame(maxWidth: .infinity, maxHeight: .infinity)

2. 给HTML添加视口元标签 #

在拼接的styledHTML中添加视口标签，让网页适配设备屏幕宽度：

func updateUIView(_ uiView: WKWebView, context: Context) {
    let styledHTML = """
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style type="text/css">
            \(try! String(contentsOf: Bundle.main.url(forResource: "ncecd", withExtension: "css")!))
        </style>
    </head>
    <body>
        \(html)
    </body>
    </html>
    """
    uiView.loadHTMLString(styledHTML, baseURL: Bundle.main.bundleURL)
}

注意：将baseURL设为Bundle.main.bundleURL确保资源加载路径正确，同时建议删掉HTML内容里的<link href="ncecd.css">标签，避免重复加载CSS引发冲突。

3. 优化CSS，使用相对单位统一字体策略 #

清理冗余代码，将固定像素替换为相对单位（如rem、pt），保证跨设备视觉一致性：

/* 移除无作用的.header类（已设置display:none） */
html {
    font-size: 16px; /* 定义rem基准值，也可改用pt：font-size:24pt，固定视觉大小 */
}

.jianhu_syn:before{
    display: block;
    content: "同义词：";
    color: black;
    font-size: 1.2rem;
}
.jianhu_syn{
    margin-top: 24px;
    display: inline-block;
    color: #942923;
    font-size: 1.2rem;
}
.jianhu_exa{
    display: block;
    color: #000000;
    font-size: 1rem;
}
.jianhu_exa:before{
    counter-increment:def;
    content:counter(def) ". ";
    padding-left: 24px;
}
.jianhu_def{
    margin-top: 28px;
    counter-reset:def;
    margin-bottom: 10px;
    display: block;
    color: #2a5598;
    background-color: rgba(87, 139, 197, 0.1);
    border-radius: 0.2rem;
    padding: 3px 6px;
    font-weight: 530;
    font-size: 1.1rem;
}

• 用rem：字体随基准值自适应，适合响应式布局；
• 用pt：印刷单位，在不同设备上视觉大小更接近一致。

4. 配置WKWebView禁用缩放 #

在makeUIView方法中设置WKWebView属性，禁止缩放确保显示一致：

func makeUIView(context: Context) -> WKWebView {
    let configuration = WKWebViewConfiguration()
    let webView = WKWebView(frame: .zero, configuration: configuration)
    // 禁用缩放
    webView.scrollView.minimumZoomScale = 1.0
    webView.scrollView.maximumZoomScale = 1.0
    webView.scrollView.bounces = false
    return webView
}

内容的提问来源于stack exchange，提问作者Howie