HTML内容适合UIWebview而不缩小
Abs*_*Abs 51 iphone objective-c uiwebview
我正在利用它UIWebView来渲染一些HTML.但是,虽然我的webview的宽度是320,但我的HTML仍然显示为全宽,并且可以水平滚动.
我希望实现本机邮件应用程序实现的相同功能,即它适合该宽度内的所有内容而不缩小 - 本机邮件应用程序如何呈现这样的HTML？
更新
我认为使用视口元标记会有所帮助,但我无法让它工作.
这就是发生的事情:
如您所见,内容不适合设备宽度.我尝试了很多viewportmeta标签组合.下面是我尝试Martins建议时会发生什么的一个例子.
原始HTML可以在这里找到.
mpr*_*vat 132
这是你做的:
在拥有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];
Den*_*nis 57
只需添加:
webView.scalesPageToFit = YES;
- 这对我来说效果要好得多,它没有像页面高度那样过大的问题. (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宽度为600px.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">
