ios – designed for iPad and iPhone fonts show completely different points in SwiftUI

January 8, 2024

1

import SwiftUI
import WebKit


struct HTMLView: UIViewRepresentable {
    var html: String

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        let styledHTML = """
        <html>
        <head>
            <model kind="textual content/css">
                /* Your CSS kinds right here */
                (strive! String(contentsOf: Bundle.major.url(forResource: "ncecd", withExtension: "css")!))
            </model>
        </head>
        <physique>
            (html)
        </physique>
        </html>
        """
        uiView.loadHTMLString(styledHTML, baseURL: nil)
    }
}

struct DetailView: View {
    @ObservedObject var vm: CoreDataViewModel
    var phrase: String

    var physique: some View {
        VStack {
            HTMLView(html: vm.wordMeanings(key phrase: phrase) ?? "")
                .font(.customized("HelveticaNeue", measurement: 48))
                .fontWeight(.black)
                .body(maxWidth: .infinity, maxHeight: .infinity)

            Spacer()
        }
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                Textual content("(phrase)")
                    .font(.headline)
                    .lineLimit(1)
            }
        }
    }
}

Why fonts are designed for iPad and iPhone show in another way. I set the dimensions to 48, I do not know why.

I imply, which means to get the content material is html tag, by the css model to parse out the content material

However I discovered that the 2 gadgets show completely different fonts

I wanna clear up the issue of font show measurement (designed for iPad and iphone)

css:


.header{
    margin-top: 12px;
    font-size: 48px;
    show: block;
    font-size: giant;
    show: none;
}
.jianhu_syn:earlier than{
    show: block;
    content material: "同义词：";
    colour: black;
}
.jianhu_syn{
    margin-top: 24px;
    show: inline-block;
    colour: #942923;
}
.jianhu_exa{
    show: block;
    colour: #000000;
    
}
.jianhu_exa:earlier than{
    counter-increment:def;
    content material:counter(def) ". ";
    padding-left: 24px;
}

.jianhu_def{
    margin-top: 28px;
    counter-reset:def;
    margin-bottom: 10px;
    show: block;
    colour: #2a5598;
    background-color: rgba(87, 139, 197, 0.1);
    border-radius: 0.2rem;
    padding: 3px 6px;
    font-weight: 530;
}

html:

<model kind="textual content/css"></model><hyperlink href="ncecd.css" rel="stylesheet"/><span class="header">不上道子</span><div class="jianhu_def">就是指不讲道理。</div><div class="jianhu_exa">他那个人又不上道子，你跟他能说出个什呢米搞豆子来呀？</div><div class="jianhu_exa">那么大的岁数不上道子，他不是把一把年纪活作得了吗？</div>

Supply hyperlink