HTML 内容适合 UIWebview 而无需缩小

HTML Content fit in UIWebview without zooming out(HTML 内容适合 UIWebview 而无需缩小)

问题描述

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

I am making use of the UIWebView to render some HTML. However, although the width of my webview is 320 my HTML is still shown full width and can be scrolled horizontally.

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

I want to achieve the same thing the native mail application achieves which is it fits all content within that width without zooming out - how does the native mail application render HTML like this?

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

I thought making use of the viewport meta tag will help, but I couldn't get this to work.

这是正在发生的事情:

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

As you can see the content does not fit the device width. I've tried so many combinations of viewport meta tag. The below is an example of what happens when I try Martins suggestion.

原始 HTML 可以在 这里找到.

Original HTML is can be found here.

本机邮件应用程序呈现此 HTML 的方式是这样的.

推荐答案

这是你要做的:

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

In your UI controller that owns the web view, make it a UIWebViewDelegate. Then where you set the URL to load, set the delegate as the controller:

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: 来正确设置缩放级别:

And finally implement the webViewDidFinishLoad: to correctly set the zoom level:

此选项适用于 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;  
}

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

I hope this helps...

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

Option B, you can try to alter the HTML (this example does the job but is less than perfect from an HTML parsing standpoint. I just wanted to illustrate my point. It does work for your example, and probably most cases. The inset of 40 can probably be detected programmatically, I didn't try to research that.

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];

这篇关于HTML 内容适合 UIWebview 而无需缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！