html - 为什么 -[UIWebView sizeThatFits :] give a larger size than document. body.offsetHeight/Width?

标签 html css iphone uiwebview

我正在尝试使用 UIWebView 来显示一些可变大小的内容,我想确定该内容的完整大小,以便我可以调整 UIWebView 的大小以完美适应内容的大小。

然而,我尝试确定内容的正确高度和宽度并不是完全简单。下面尝试寻找尺寸的测试方法...

- (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]);
}

...产生以下日志结果...

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}

虽然第一个和第二个结果对我来说有意义 - 正文大小与样式属性中的大小匹配,并且 div 大小适合实际内容 - 第三个结果没有意义。实际上,UIWebView 似乎在某些边缘(在这种情况下似乎是顶部、底部和左侧)将实际的 HTML 内容插入了 8 个像素,这样 sizeThatFits: 给出的合适尺寸与 Javascript 主体高度不匹配/宽度结果。

任何人都可以对此给出解释,并可能提供一种消除这些插图的方法吗?谢谢。

最佳答案

如果您将 HTML 更改为这样会怎样?

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

我认为内容本身的大小合适,但视口(viewport)和正文之间存在边界,这导致了您的差异。 (对于默认的边缘边距,8px 听起来很合适。)

关于html - 为什么 -[UIWebView sizeThatFits :] give a larger size than document. body.offsetHeight/Width?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1776446/

相关文章:

javascript - 在 Angular 7 的 ngFor 中有条件地禁用按钮

css - 使用类更改 div 的大小?

html - 有没有其他方法可以更改 Bootstrap 导航链接的颜色?使用深色主题

锁定屏幕时 iOS 停止查找信标

iphone - CLLocationManager 从不调用委托(delegate)方法

javascript - 使用 Cordova、Javascript、PHP、MySQL 的实时多人游戏 - 帮助和提示

html - 字体不能在外部工作

html - 如何使用 Twitter Bootstrap 创建类似 Facebook 的工具提示布局?

ios - 在代码中为 UIButton 设置图像

javascript - 框架如何实现自定义HTML属性和双重 curl 等功能?