Dynamically set webview width to match content width (and height)

Question

as the title says, I'm trying to find a way to size a UIWebView's width to match its content's width, up to some maximum width. I would also like to have it match the height, but assuming we can find the proper width, the height problem is answered by many other stack overflow posts.

To give an example:

If the input to the webview is a page that says Hello World, I want to size the webview to exactly fit Hello world. If instead the page was Hello,<br/>Stack Overflow, the webview should be set wide enough to fit Stack Overflow on one line. If there is some really long input, the webview should be set to some given maximum width and allow either word wrapping or side scrolling where appropriate. This should ideally accommodate different sized fonts and images as well (but it's ok to ignore other html elements)

I've tried many of the different techniques people used for dynamically setting the webview height to its content height but none of them worked the way I wanted for the width. Here are some examples:

using UIWebview's scrollView.contentSize property:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    webView.frame = CGRectMake(0, 0, [self maxWebViewWidth], 1); // force layout at max Width
    CGFloat width = MIN(webView.scrollView.contentSize.width,[self maxWebViewWidth]); // the width we want to use

    webView.frame = CGRectMake(0, 0, width, 1); // force layout at our width
    CGFloat height = webView.scrollView.contentSize.height; //the height we want to use

    webView.frame = CGRectMake(0, 0, width, height);
}

The problem with the above example is that when I'm calculating width, webView.scrollView.contentSize.width always returns maxWebViewWidth or greater, never less, even if the input is short like "hello"

if we change

    webView.frame = CGRectMake(0, 0, [self maxWebViewWidth], 1); // force layout at max  Width

to

    webView.frame = CGRectMake(0, 0, 1, 1); // force layout at some small width

it gets a width that matches the widest character, and you get a result like this:

H
e
l
l
o

I've achieved similar results using the sizeThatFits, and the javascript ways of accessing the height and width.

I suspect that the reason for the above results is that the content width of a webivew actually will span the whole width of a webview even if it's not required to fit all of the content (imagine the case with both left and right aligned text - so the content width must at least span the whole webview width).

Another attempt which produced different results:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    webview.frame = CGRectMake(0,0,1,1);
    [webView sizeToFit];
}

Which actually sized the webview width to match the longest word:

With the input: hello there thisisalongword lol this isnt working

We get the following results:

hello there
thisisalongword
lol this isnt
working

I'm not quite sure why that works in that way but... yeah.

Is there some way of finding the minimum width which does not trigger word wrapping?

Answer 1

Try this code

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    int content_height = [[_textWebview stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"] integerValue];
    CGRect rect = _textWebview.frame;
    rect.size.height = content_height+15;
    _textWebview.frame = rect;
}