CODEWITHSUNDEEP
htmlioscsswkwebview
sweatervest
sweatervest

Reputation: 193

Disable Font Scaling on WKWebView

I would like to use a WKWebView on iOS that always displays text with the exact font size I specify, for example 12px. But I cannot find a way to stop it from scaling the fonts based on a lot of different variables, including the orientation of the device and the content in the HTML.

I have tried many different combinations of parameters in the "viewport" HTML tag, like setting a constant width, and setting the initial, minimum and maximum scales to different values. None of this prevents the web view from changing the fonts in context-specific ways.

Here is some sample Swift code that illustrates what I'm seeing:

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet var webView: WKWebView!
    @IBOutlet var webView2: WKWebView!

    override func viewDidLoad()
    {
        super.viewDidLoad()

        let htmlFormatString = "<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"/><style type=\"text/css\">p {font-size: 12px;}</style></head><body>%(body)</body></html>"

        let htmlTest1 = htmlFormatString.replacingOccurrences(of: "%(body)", with: "<p>Test paragraph 1.")

        webView.loadHTMLString(htmlTest1, baseURL: URL(string: "http:"))

        let htmlTest2 = htmlFormatString.replacingOccurrences(of: "%(body)", with: "<p>Test paragraph 1.<p>Test paragraph 2.")

        webView2.loadHTMLString(htmlTest2, baseURL: URL(string: "http:"))
    }
}

I just set up a storyboard with two web views, one bounded to the top half of the view, the other bounded to the bottom half.

If you run it on a simulator in portrait mode, the content in both displays at the same scale. But then if you rotate to landscape, the bottom web view's font is significantly larger than the top's. From experimenting I determined that the font gets bigger when there are two "p" tags in the HTML. When there is only a single "p", the font is smaller. I don't understand what this is trying to achieve, because if anything since there is more text in the bottom web view I would expect it to be scaled down. Either way, I don't want it to scale at all. My designer requested for it to always be drawn at 12px no matter what.

You can see this even if you completely remove the "head" from the HTML, so there is no viewport or style.

Upvotes: 5

Views: 1870

Answers (1)

Paco_777
Paco_777

Reputation: 225

Try to add in your css :

body {
  -webkit-text-size-adjust: none;
}

Upvotes: 5

Related Questions