Adjust height of WKWebView frame based on scrollHeight of the webView's content

WKWebViewSizeToFit.swift

// Since the WKWebView has no sizeToFit() method, increase the frame height of the webView to 
// match the height of the content's scrollHeight
// 
// The WKWebView's `navigationDelegate` property needs to be set for the delegate method to be called

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

    if webView.isLoading == false {
        webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { [weak self] (result, error) in
            if let height = result as? CGFloat {
                webView.frame.size.height += height
            }
        })
    }

}

If you're using loadHTMLString(_:baseURL:) method on WKWebView to display your content and getting way too big of a height value, a possibly simpler fix than using javascript to inject the viewport meta tag is to just include it right at the beginning of the html string. This was all I needed:

"<meta name='viewport' content='width=device-width, shrink-to-fit=YES'>"

But if that doesn't work, you could always try the full string from above:

"<meta name='viewport' content='width=device-width, shrink-to-fit=YES' initial-scale='1.0' maximum-scale='1.0' minimum-scale='1.0' user-scalable='no'>"

My html string didn't have a head tag, so I just put it at the very beginning. But if your string does have a head tag, then put this meta tag in there.

@mogelbuster I am using loadHTMLString(_:baseURL:) method on WKWebView to display my content and getting way too big of a height value , I tried @k-marvin and ur solutions but no luck , kindly suggest

I was also getting height too big inside the UITableViewCells, the suggested solutions didn't work consistently. In my case querying specific div instead of the whole body seems to work fine.
webView.evaluateJavaScript("document.getElementById('publication').scrollHeight") { height, error in ... }
Where my top

element has id='publication'

thanks! 👯

The problem for me was the document.body.width, even if meta tag still very small...
So I fix running a script before:
document.body.style.width = '{width}px'

when width it's the current resolution of my device screen...

after than, when I call the "document.body.scrollHeight" works like a charm...

I use Xamarin by the way...

  public override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation) {
        if (renderer?.Element is WebListItemView view)
        {
            webView.EvaluateJavaScript("document.readyState", async (completed, error) =>
            {
                if (completed is null) return;
  
                await webView.EvaluateJavaScriptAsync($"document.body.style.width = '{view.Width}px'");
                var offsetHeight = await webView.EvaluateJavaScriptAsync("document.body.scrollHeight");
                if (offsetHeight is Foundation.NSNumber height)
                {
                    view.HeightRequest = height.DoubleValue;
  
                    if (view.Parent is ViewCell cell) cell.ForceUpdateSize();
                }
            });
        }
  }

I'm getting too small content with view port.

Thanks a lot. This works like a charm.

The problem for me was the document.body.width, even if meta tag still very small...
So I fix running a script before:
document.body.style.width = '{width}px'

Thanx! It's work for me. Your answer save me :)