HTML内容适合UIWebview而不缩小 [英] HTML Content fit in UIWebview without zooming out

问题描述

我正在使用 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.

原生邮件应用程序就是这样 。

推荐答案

以下是您的操作：

在拥有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而不缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！