根据内容字体大小动态调整 UIWebView 的大小

Posted 2023-03-06

【中文标题】根据内容字体大小动态调整 UIWebView 的大小

【英文标题】：Dynamically sizing a UIWebView based on it's content font size

【发布时间】：2011-04-04 17:21:17

【问题描述】：

我有一些文本需要在我的应用程序中显示。文本包含需要交互的链接。我尝试了一些在UITextViews 和UILabels 中创建可点击链接的解决方案。

UITextView链接

UITextView 提供数据检测器，可以检测 URL 并使它们可点击。 对我来说无法使用，因为该链接只会在 Safari 外部打开，无法控制并使用该链接做我想做的事。

UILabel 链接使用“花式标签”(http://furbo.org/2008/10/07/fancy-uilabels/)

几乎是完美的解决方案，提供链接检测和一种让用户在线查看和点击链接的方式，让我完全控制按下链接时如何处理。 目前无法使用，因为该实现使用UIButtons 覆盖链接，并且它们不会用长链接上的文本换行。

最后我决定使用 webview。我将文本传递到 webview 并围绕它构建一个基本的 html 包装器，一切都是 hunky-dory。这与 iPhone 版 Twitter（又名 Tweetie）使用的方法相同。

我现在唯一的问题是，如果文本太长，webview 会剪辑溢出并滚动以查看剪辑的文本。 其次，如果文字太短，那么在webview下面会浪费很大的空间。

与 Tweetie 不同，我在 webview 下方有更多内容，我想避免滚动溢出或浪费空间。无论如何，webview 是滚动视图的子视图，因此整个页面的内容可以增长，而其子视图无需滚动。

有什么方法可以动态调整 webview 的大小，使其根据内容的高度恰到好处？

到目前为止，我已经尝试了很多东西，似乎没有什么是可靠的解决方案：

sizeToFit 什么都不做（或者更有可能只是将大小设置为当前帧的大小）。 sizeThatFits: 无论如何都会返回其当前大小。 NSString 的 sizeWithFont:constrainedToSize: 不可行，因为 UIWebView 和 UIFont 对 18 的大小有不同的表示。 只是为了详细说明这一点。在我的测试中，我发现 scaleFactor 为 1.0 且 scalesPageToFit 设置为 NO 且整个页面的字体大小设置为 13.5pt（在 CSS 中）的 webView 呈现的文本大小与UILabel 和 UIFont 大小为 18。如果有人能解释一下，我将不胜感激。 另外，在 webView 中，我使用 CSS 属性 word-wrap: break-word; 以防止 webView 水平滚动长字或 URL。因此，webView 和UILineBreakModeWordWrap 之间的包装行为完全不同。即使使用UILineBreakModeCharacterWrap 也不会产生相同的结果。

要么没有办法做到这一点，要么我很愚蠢，错过了一些简单的东西。如果有人能提供一些见解，我将不胜感激。谢谢。

【参考方案1】：

其实，你可以通过一点小技巧来使用-sizeThatFits:。有关类似问题，请参阅 my response。

【参考方案2】：

我在http://www.iphonedevsdk.com/forum/iphone-sdk-development/1388-getting-actual-content-size-uiwebview.html找到了我的问题的解决方案

我不相信这是最好的解决方案，但它确实有效。如果有人有更好的想法，我会很高兴听到他们的意见。

我最终在webViewDidFinishLoad: 的webView 上运行了该javascript。我有一个单独的 div 元素来包装我的内容，称为 body，所以我的代码如下所示：

- (void)webViewDidFinishLoad:(UIWebView *)webView

    NSString *string = [_webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"body\").offsetHeight;"];
    CGFloat height = [string floatValue] + 8;
    CGRect frame = [_webView frame];
    frame.size.height = height;
    [_webView setFrame:frame];

    if ([[self delegate] respondsToSelector:@selector(webViewController:webViewDidResize:)])
    
        [[self delegate] webViewController:self webViewDidResize:frame.size];
    

我不得不稍微填充高度，因为原始值没有考虑边距大小等。

获得高度后，我向我的代表回电，说 webview 确实调整了大小，以便可以完成布局。