CODEWITHSUNDEEP
iosobjective-cswiftwkwebviewdynamic-type-feature
Wasserfloh
Wasserfloh

Reputation: 216

How can I make a WKWebView support dynamic type/ respond to UIFontMetrics

My app is supporting dynamic type, so the font sizes are scaled according to the user's preferences set in the accessibility settings in iOS.

One view of the app though contains a WKWebView to display a large portion of text. Does anyone know how to make WKWebView also respond to the scaled font sizes?

I figured, I could do it using CSS/JS injection, applying the proper font size on the fly. But maybe there is a better solution? Is WKWebView capable of responding to dynamic font/ UIFontMetric?

I did some research, but could not find anything.

Upvotes: 1

Views: 1622

Answers (1)

David.Chu.ca
David.Chu.ca

Reputation: 38654

WKWebView does support dynamic type. Here are some font names you should use in css section or file:

font: -apple-system-body 
font: -apple-system-headline 
font: -apple-system-subheadline 
font: -apple-system-caption1
...

Here are some steps I have done in my iOS app. First step is to add a style sheet file stylesheet.css to my project.

body {
  font: -apple-system-body;
}

h1 {
  font: -apple-system-headline;
}
...

Then, in my html file, I add those items in my head section:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
    <link rel="stylesheet" href="stylesheet.css" />
    <style>
     // other specific styles in this html
    ....

In this way, your web viewer will show html text in dynamic types!

Ref: Apple doc on Using Dynamic Type With Web Views

Upvotes: 2

Related Questions