ios – designed for iPad and iPhone fonts display different issues in SwiftUI


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>
            <style type="text/css">
                /* Your CSS styles here */
                \(try! String(contentsOf: Bundle.main.url(forResource: "ncecd", withExtension: "css")!))
            </style>
        </head>
        <body>
            \(html)
        </body>
        </html>
        """
        uiView.loadHTMLString(styledHTML, baseURL: nil)
    }
}

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

    var body: some View {
        VStack {
            HTMLView(html: vm.wordMeanings(keyword: word) ?? "")
                .font(.custom("HelveticaNeue", size: 48))
                .fontWeight(.black)
                .frame(maxWidth: .infinity, maxHeight: .infinity)

            Spacer()
        }
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text("\(word)")
                    .font(.headline)
                    .lineLimit(1)
            }
        }
    }
}

Why fonts are designed for iPad and iPhone display differently. I set the size to 48, I don’t know why.

I mean, meaning to get the content is html tag, through the css style to parse out the content

But I found that the two devices display different fonts

I wanna solve the problem of font display size (designed for iPad and iphone)

css:


.header{
    margin-top: 12px;
    font-size: 48px;
    display: block;
    font-size: large;
    display: none;
}
.jianhu_syn:before{
    display: block;
    content: "同义词:";
    color: black;
}
.jianhu_syn{
    margin-top: 24px;
    display: inline-block;
    color: #942923;
}
.jianhu_exa{
    display: block;
    color: #000000;
    
}
.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;
}

html:

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

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img