5

The problem:

I am trying to resize the text / content that is being displayed in a WKWebView. The content itself is loaded from a remote source (via loadHTMLString), so I cannot change the css.

I already tried most other solutions I could find on stack overflow (like https://stackoverflow.com/a/43694902/1673377), but none seem to work.

Some background:

Xcode 9.2, Swift 4, iOS 10 / 11.

To monitor the content size, I used the code taken from here: https://stackoverflow.com/a/41511422/1673377

lazy var webView: WKWebView = {
    //Javascript string
    let source = "window.onload=function () {window.webkit.messageHandlers.sizeNotification.postMessage({justLoaded:true,height: document.body.scrollHeight});};"
    let source2 = "document.body.addEventListener( 'resize', incrementCounter); function incrementCounter() {window.webkit.messageHandlers.sizeNotification.postMessage({height: document.body.scrollHeight});};"
    
    //UserScript object
    let script = WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
    
    let script2 = WKUserScript(source: source2, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
    
    //Content Controller object
    let controller = WKUserContentController()
    
    //Add script to controller
    controller.addUserScript(script)
    controller.addUserScript(script2)
    
    //Add message handler reference
    controller.add(self, name: "sizeNotification")
    
    //Create configuration
    let configuration = WKWebViewConfiguration()
    configuration.userContentController = controller
    
    return WKWebView(frame: CGRect.zero, configuration: configuration)
}()

To disable zooming, I also evaluate the following JavaScript:

"var meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');document.getElementsByTagName('head')[0].appendChild(meta);"

(I tried playing around with the values for initial-scale and maximum-scale, but to no avail.)

Any help would be greatly appreciated!

Community
  • 1
  • 1
Wilbur Mercer
  • 53
  • 2
  • 6

1 Answers1

10

Basic Goal

If you want to change the font size, you somehow need CSS. Your goal therefore should be to inject the following 2 lines somewhere in the html header:

<link rel='stylesheet' href='style.css' type='text/css'>
<meta name='viewport' content='initial-scale=1.0'/> // This may help with scale

If you add a style.css file to your project, it now should be respected.

Actual implementation

I don't know how the html you receive from the server is configured, but you could try to manipulate it a bit like this before loading it onto the WKWebView:

let customHeader = <link rel='stylesheet' href='style.css' type='text/css'><meta name='viewport' content='initial-scale=1.0'/>
let newHtml = serverHtml.replacingOccurrences(of: "<head>", with: "<head>" + customHeader)
fredpi
  • 8,414
  • 5
  • 41
  • 61
  • Thank you for your suggestion - I went with something similar to your idea - in the HTML's header (in ``), I appended / injected `body,html { font-size: \(zoomLevel); }`, with `zoomLevel` being a percentage value (i.e. 50, 100, 150, ...). – Wilbur Mercer Mar 08 '18 at 08:44