Why does -[UIWebView sizeThatFits:] give a larger size than document.body.offsetHeight/Width?

html css iphone uiwebview

13,302

Solution 1

What happens if you change your HTML to this?

NSString *content = @"<html><body style='background-color: transparent; width: 300px; height: 500px; margin: 0; padding: 0;'><div id='ContentDiv'>Content Here</div></body></html>";

I'm thinking that the content itself is the right size, but there's a boundary between the viewport and the body that's causing your discrepancy. (And 8px sound about right for the default around-the-edge margin.)

Solution 2

One nice and simple solution is to put this code on your HTML <head> tag:

<meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0" />

Here you can define zoom scales and widths.

13,302

Author by

Bryan Henry

Updated on June 04, 2022

Comments

Bryan Henry almost 2 years

I am attempting to use a UIWebView to display some variable-size content, and I'd like to determine the full size of that content so that I can resize the UIWebView to fit the size of the content perfectly.

My attempts at determining the correct height and width of the content, however, haven't been completely straightforward. The following attempt at testing methods for finding the size...

- (void)viewDidLoad {
  [super viewDidLoad];

  self.webView.backgroundColor = [UIColor clearColor];

  NSString *content = @"<html><body style='background-color: transparent; width: 300px; height: 500px'><div id='ContentDiv'>Content Here</div></body></html>";
  [self.webView loadHTMLString:content baseURL:nil];

  debugLog(@"Loading HTML string: %@", content);
}

- (void)webViewDidFinishLoad:(UIWebView *)webView {
  NSString *bodyHeight = [self.webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"];
  NSString *bodyWidth = [self.webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetWidth"];
  NSString *contentHeight = [self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('ContentDiv').offsetHeight"];
  NSString *contentWidth = [self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('ContentDiv').offsetWidth"];

  CGSize fittedSize = [self.webView sizeThatFits:CGSizeZero];

  debugLog(@"document.body.offsetHeight/Width: {%@, %@}", bodyWidth, bodyHeight);
  debugLog(@"document.getElementbyId('ContentDiv').offsetHeight/Width: {%@, %@}", contentWidth, contentHeight);
  debugLog(@"sizeThatFits: %@", NSStringFromCGSize(fittedSize));

  self.webView.frame = CGRectMake(0,
                                  0,
                                  [contentWidth floatValue],
                                  [contentHeight floatValue]);
}

...produces the following log results...

Loading HTML string: <html><body style='background-color: transparent; width: 300px; height: 500px'><div id='ContentDiv'>Content Here</div></body></html>
document.body.offsetHeight/Width: {300, 500}
document.getElementbyId('ContentDiv').offsetHeight/Width: {300, 20}
sizeThatFits: {308, 516}

While the first and second results make sense to me - the body size matches the size in the style attribute, and the div size fits the actual content - the third result does not make sense. Indeed, UIWebView seems to inset the actual HTML content by 8 pixels on some edges (top, bottom, and left in this case, it seems) such that the fitted size given by sizeThatFits: doesn't match up with the Javascript body height/width result.

Can anyone give an explanation for this, and potentially a way to eliminate these insets? Thanks.