HTML 内容适合 UIWebview 而无需缩小答案

【问题标题】：HTML Content fit in UIWebview without zooming outHTML 内容适合 UIWebview 而无需缩小
【发布时间】：2012-05-26 20:17:56
【问题描述】：

我正在使用UIWebView 来呈现一些HTML。但是，虽然我的 webview 的宽度是 320，但我的 HTML 仍然显示为全宽并且可以水平滚动。

我想实现与本机邮件应用程序相同的功能，即它适合该宽度内的所有内容而不缩小 - 本机邮件应用程序如何呈现这样的 HTML？

更新

我认为使用视口元标记会有所帮助，但我无法让它发挥作用。

这是正在发生的事情：

如您所见，内容不适合设备宽度。我已经尝试了很多viewport 元标记的组合。以下是我尝试 Martins 建议时发生的示例。

可以在here找到原始HTML。

native mail application is like so 呈现此 HTML 的方式。

【问题讨论】：

使用具有最小宽度和高度以及最小和最大宽度的div标签填充内容，它将根据父内容进行相应调整
@safecase 这不是 HTML 解决方案。我需要使用 Objective-c 或 iPhone 故事板或 uiwebview 配置来做到这一点。
您的网页是 iphone 专用的，还是共享移动用户和非移动用户？
查看我的编辑，我认为这只是一个视口问题。
捕获html内容并在显示页面之前将width=320px添加到html body标签。我遇到了类似的问题，这是我设法解决问题的唯一方法。

标签： iphone objective-c uiwebview

【解决方案1】：

这就是你要做的：

在拥有 Web 视图的 UI 控制器中，将其设为 UIWebViewDelegate。然后在设置要加载的 URL 的地方，将委托设置为控制器：

NSString *urlAddress = @"http://dl.dropbox.com/u/50941418/2-build.html";
NSURL *url = [NSURL URLWithString:urlAddress];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[webView loadRequest:requestObj];  
webView.delegate = self;

最后实现webViewDidFinishLoad: 以正确设置缩放级别：

此选项适用于 iOS 5.0 和 >

- (void)webViewDidFinishLoad:(UIWebView *)theWebView
{
  CGSize contentSize = theWebView.scrollView.contentSize;
  CGSize viewSize = theWebView.bounds.size;

  float rw = viewSize.width / contentSize.width;

  theWebView.scrollView.minimumZoomScale = rw;
  theWebView.scrollView.maximumZoomScale = rw;
  theWebView.scrollView.zoomScale = rw;  
}

我希望这会有所帮助...

选项 B，您可以尝试更改 HTML（此示例可以完成这项工作，但从 HTML 解析的角度来看并不完美。我只是想说明我的观点。它确实适用于您的示例，并且可能适用于大多数情况。 40 的插图可能可以通过编程方式检测到，我没有尝试研究。

NSString *urlAddress = @"http://dl.dropbox.com/u/50941418/2-build.html";
NSURL *url = [NSURL URLWithString:urlAddress];

NSString *html = [NSString stringWithContentsOfURL:url encoding:[NSString defaultCStringEncoding] error:nil];
NSRange range = [html rangeOfString:@"<body"];

if(range.location != NSNotFound) {
  // Adjust style for mobile
  float inset = 40;
  NSString *style = [NSString stringWithFormat:@"<style>div {max-width: %fpx;}</style>", self.view.bounds.size.width - inset];
  html = [NSString stringWithFormat:@"%@%@%@", [html substringToIndex:range.location], style, [html substringFromIndex:range.location]];
}

[webView loadHTMLString:html baseURL:url];

【讨论】：

非常感谢您的回答。所以我只是尝试了这个，它更好。但是，发生的情况是内容适合设备屏幕的宽度。但是文字很小。本机邮件应用程序以某种方式缩放文本和其他元素，同时保持设备的固定宽度。对此有什么想法吗？这是本机邮件应用程序显示相同电子邮件的方式：dl.dropbox.com/u/50941418/iphone_ex.PNG
我明白你的意思。不幸的是，这只能通过弄乱 HTML 来完成。您可以从屏幕截图中看到它不是在图形级别完成的，因为它不是全部成比例的。那是因为邮件应用程序可能会改变样式。我已将选项 B 添加到我的答案中，以了解您如何做到这一点（不要忘记删除此选项的委托，否则它也会尝试扩展）。
@mprivate 是的，这似乎有效！你能告诉我更多关于逻辑的信息吗？您是否正在添加一个新的样式块来设置所有 div 的最大宽度？如果是这样，如果有纯表格布局的 HTML，这仍然有效吗？还是我误会了？
是的，它只是为 div 设置上限。我怀疑相同的样式属性可以应用于 HTML 正文标记。我没有试着说实话，但我记得读过你可以。我猜你需要对样式进行一些调整以支持所有类型的 HTML 布局，但我相信你明白了基本的想法。
它有效，因为我未选中“Scales Page To Fit”的值谢谢

【解决方案2】：

只需添加这个：

webView.scalesPageToFit = YES;

【讨论】：

这对我来说效果更好，它没有像接受的答案那样页面高度太大的问题。
刚找到这个，它让我免于数小时的挫败感。不知道为什么它没有得到更多的支持。
如果您的内容格式正确，这将很有效。但是，如果您想缩小内容，则必须使用所选答案并对其进行一些修改（根据您要缩小的内容，从 viewSize 的宽度或高度中减去少量。这就是为什么这没有更多的赞成票。
这对我有用，而上面接受的解决方案启动了移动 safari，我需要 WebView 保留在应用程序中但被覆盖。简单！
在我的例子中，这种方法缩小了原始的 html 页面，如果使用相同的 css 文件，这会使网站变得非常不可读。 @Martin 的解决方案更适合我的情况。

【解决方案3】：

通常，您应该使用视口元标记。但是它的使用非常不稳定，主要是如果你想要一个跨平台的网页。

这也取决于你有什么内容和css。

对于我的 iPhone 主页，它必须从纵向自动调整为横向，我使用这个：

<meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no">

如果需要特殊调整大小，也可以使用事件：

<body onorientationchange="updateOrientation();">

在您的 javascript 中使用相应的功能：

function updateOrientation() {
  if(Math.abs(window.orientation)==90)
      // landscape
  else
      // portrait   
}

编辑：

看到您的页面源代码，您似乎是使用网络编辑器制作的，不是吗？

好的，我明白了。您的主 div 的宽度为 600 像素。 iphone屏幕分辨率为320x480。 600 > 320 所以它超出了屏幕边界。

现在，我们来做一些简单的操作：

320 / 600 = 0.53
480 / 600 = 0.8

因此，您希望最小缩小 0.5 倍，最大缩小 0.8 倍。让我们改变视口：

<meta name="viewport" content="width=device-width; minimum-scale=0.5; maximum-scale=0.8; user-scalable=no">

【讨论】：

感谢您的回答。但是我尝试了上面的元标记，但没有用。查看我的问题更新，
我尝试了新的视口元标记，它似乎完全实现了 mprivat 答案的作用。但是，仍然存在一个问题。请参阅我对 mprivat 答案的评论。此外，这个应用程序应该采用不同的 HTML 并以与本机邮件应用程序相同的方式呈现它，所以我不确定该计算是否适用于所有 HTML 电子邮件。
如何使用 Javascript 使文本变大？当您的页面完成加载调用时，您可以使用：- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script webview 方法

【解决方案4】：

对我有用的是在 Interface Builder 中选择 UIWebView 并选中“缩放页面以适应”框：

【讨论】：

这对 iPAd 不起作用。尺寸不增加。 Webview 大小减小。

【解决方案5】：

斯威夫特 3：

使用此扩展可以根据 webview 的大小调整 webview 内容的大小。

extension UIWebView {
    ///Method to fit content of webview inside webview according to different screen size
    func resizeWebContent() {
        let contentSize = self.scrollView.contentSize
        let viewSize = self.bounds.size
        let zoomScale = viewSize.width/contentSize.width
        self.scrollView.minimumZoomScale = zoomScale
        self.scrollView.maximumZoomScale = zoomScale
        self.scrollView.zoomScale = zoomScale
    }
}

如何调用？

webViewOutlet.resizeWebContent()

【讨论】：

试图让它在 collectionView 中工作但不调整大小...有什么建议吗？
尝试重新加载collectionView或在collectionView的contentView上调用layoutIfNeeded()
func webViewDidFinishLoad(_ webView: UIWebView) { self.webView.resizeWebContent() } 在 UIWebViewDelegate 方法中调用。

【解决方案6】：

@implementation UIWebView (Resize)

- (void)sizeViewPortToFitWidth {
    [self stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.querySelector('meta[name=\"viewport\"]').setAttribute('content', 'width=%d;', false); ", (int)self.frame.size.width]];
}

@end

【讨论】：

querySelector 需要在视口周围使用转义引号才能有效 javascript：document.querySelector('meta[name=\"viewport\"]')

【解决方案7】：

您可以从 HTML 生成NSAttributedString（在后台执行）：

@implementation NSAttributedString (Utils)

+ (void)parseHTML:(NSString *)html withCompletion:(void (^)(NSAttributedString *completion, NSError *error))completion
{
    dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void){
        NSError * __autoreleasing *error = nil;
        NSAttributedString *result = [[NSAttributedString alloc] initWithData:[html dataUsingEncoding:NSUTF8StringEncoding]
                                                                      options:@{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType,
                                                                                NSCharacterEncodingDocumentAttribute: @(NSUTF8StringEncoding)}
                                                           documentAttributes:nil error:error];
        NSError *safeError = (error != nil) ? *error : nil;
        dispatch_sync(dispatch_get_main_queue(), ^(void){
            completion(result, safeError);
        });
    });
}

@end

并通过UITextView实例展示：

[NSAttributedString parseHTML:htmlString withCompletion:^(NSAttributedString *parseResult, NSError *error) {
        bodyTextView.attributedText = parseResult;
}];

但是，这种方法可能会破坏某些布局功能。

【讨论】：

【解决方案8】：

我通过取消勾选“缩放页面以适应”解决了这个问题

【讨论】：