iOS Development

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

Spread the love

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 = """
            <type sort="textual content/css">
                /* Your CSS types right here */
                (strive! String(contentsOf: Bundle.primary.url(forResource: "ncecd", withExtension: "css")!))
        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", dimension: 48))
                .body(maxWidth: .infinity, maxHeight: .infinity)

        .toolbar {
            ToolbarItem(placement: .principal) {
                Textual content("(phrase)")

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

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

However I discovered that the 2 gadgets show completely different fonts

I wanna remedy the issue of font show dimension (designed for iPad and iphone)


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

    margin-top: 28px;
    margin-bottom: 10px;
    show: block;
    coloration: #2a5598;
    background-color: rgba(87, 139, 197, 0.1);
    border-radius: 0.2rem;
    padding: 3px 6px;
    font-weight: 530;


<type sort="textual content/css"></type><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>

Leave a Reply

Your email address will not be published. Required fields are marked *