HTML内容适合UIWebview而不缩小

时间：2012-05-19 15:22:03

标签： iphone objective-c uiwebview

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

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

更新

我认为使用视口元标记会有所帮助，但我无法使其工作。

这就是发生的事情：

enter image description here

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

可以找到原始HTML here。

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

8 个答案:

答案 0 :(得分：130)

这是你做的：

在拥有网络视图的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和＆gt; 

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

答案 1 :(得分：57)

只需添加：

webView.scalesPageToFit = YES;

答案 2 :(得分：5)

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

它还取决于您拥有的内容和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">

答案 3 :(得分：5)

对我来说有用的是在Interface Builder中选择UIWebView并选中“Scales Page To Fit”框：

enter image description here

答案 4 :(得分：1)

@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

答案 5 :(得分：1)

斯威夫特3：

  

使用此扩展程序根据网页视图的大小调整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()

答案 6 :(得分：0)

您可以从HTML生成<Row onClick={this.handleChange} > <Col s={12}> <Col s={4} style={{marginTop: '80px'}}> <Col s={12}> <Col s={3} className='center'><Button type="button" value="endangered" name="cause" floating={true} className={(this.state.cause === 'endangered') ? 'green' : 'blue'} style={radioStyle}/></Col> <Col s={9}><label>Endagered Animals & Wildlife</label></Col> </Col> <Col s={12}> <Col s={3} className='center'><Button type="button" value="microplastics" name="cause" floating={true} className={(this.state.cause === 'microplastics') ? 'green' : 'blue'} style={radioStyle}/></Col> <Col s={9}><label>Microplastics & Ocean Pollution</label></Col> </Col> <Col s={12}> <Col s={3} className='center'><Button type="button" value="carbon" name="cause" floating={true} className={(this.state.cause === 'carbon') ? 'green' : 'blue'} style={radioStyle}/></Col> <Col s={9}><label>Carbon Deposits & Emission</label></Col> </Col> <Col s={12}> <Col s={3} className='center'><Button type="button" value="other" name="cause" floating={true} className={(this.state.cause === 'other') ? 'green' : 'blue'} style={radioStyle}/></Col> <Col s={9}><label>Company SignUp</label></Col> </Col> </Col> </Col> </Row> （在后台执行）：

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

但是，某些布局功能可能会因此方法而损坏。

答案 7 :(得分：0)

我通过取消选中“缩放页面以使其适合”解决了该问题 enter image description here

相关问题
最新问题