2011-01-12 13 views
2

これは、UIWebViewsが単一の画像を表示しているためです。 私が望むのは、場所に合わない場合はイメージを縮小し、そうでない場合は元のサイズにしておきます。だからここ は、私が(のUIViewControllerで)それを行う方法です。UIWebViewはビュー全体に適合する画像を使用します

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    UIWebView *webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 80)]; 
    NSString *path =[[NSBundle mainBundle] bundlePath]; 
    NSURL *baseUrl =[NSURL fileURLWithPath:path]; 

    NSString *html = [NSString stringWithFormat:@"<html><head>" 
//THE LINE ABOVE IS TO PREVENT THE VIEW TO BE SCROLLABLE 
     "<script>document.ontouchstart = function(event) { event.preventDefault(); }</script>" 
     "</head><body style=\"text-align:center;margin:0;padding:0\">" 
     "<img src=\"banner.gif\" />" 
     "</body>" 
     "</html>"];    

    webView.scalesPageToFit = YES; 
    [webView loadHTMLString:html baseURL:baseUrl]; 
    [self.view addSubview:webView]; 
    [webView release]; 
} 

これは、画像をトリミングし、所望の動作ではありませんWebViewのスクロールを行います。

だから私は、画像タグのintいくつかのCSSをしようとして始めた:

"<img style=\"width:100%\" src=\"banner.gif\" />" 

または

"<img style=\"max-width:100%\" src=\"banner.gif\" />" 

私はなぜ知らないが、100%の幅ではないようですUIView、それは本当に小さいです!

 "</head><body style=\"width:100%;text-align:center;margin:0;padding:0\">" 
     "<img style=\"width:100%\" src=\"banner.gif\" />" 

そして、何それはないことがちょうど防止されています(ビューのソースイメージが320PXよりも大きい、そしてここでの結果です:)

Too Small Image

だから私は体の幅をSETING試してみました"text-align"プロパティが機能します。 幅がビューに合っていれば不要ですが、それでも機能しないので、テキストアラインメントも削除しようとしました。 ビューの幅にイメージサイズを設定しようとしましたが、網膜デバイスでは機能しません。 デバイス幅にビューポートを設定しようとしましたが、変更されません。

これはどのように行うのですか?ここで

a little sample with 3 images I'd like to fit, in case you have time to have a look

答えて

14

UPDATEです:私は、sizeToFit

NSString *htmlString = [NSString stringWithFormat: 
         @"<html>" 
         "<head>" 
         "<script type=\"text/javascript\" >" 
         "function display(img){" 
         "var imgOrigH = document.getElementById('image').offsetHeight;" 
         "var imgOrigW = document.getElementById('image').offsetWidth;" 
         "var bodyH = window.innerHeight;" 
         "var bodyW = window.innerWidth;" 
         "if((imgOrigW/imgOrigH) > (bodyW/bodyH))" 
         "{" 
         "document.getElementById('image').style.width = bodyW + 'px';" 
         "document.getElementById('image').style.top = (bodyH - document.getElementById('image').offsetHeight)/2 + 'px';" 
         "}" 
         "else" 
         "{" 
         "document.getElementById('image').style.height = bodyH + 'px';" 
         "document.getElementById('image').style.marginLeft = (bodyW - document.getElementById('image').offsetWidth)/2 + 'px';" 
         "}" 
         "}" 
         "</script>"       
         "</head>" 
         "<body style=\"margin:0;width:100%;height:100%;\" >" 
         "<img id=\"image\" src=\"%@\" onload=\"display()\" style=\"position:relative\" />" 
         "</body>" 
         "</html>",url 
         ]; 


[webView loadHTMLString:htmlString baseURL:nil]; 

旧バージョンを(けれどもうまく動作しない)に設定する必要がJavaScriptでこれを行うには良い方法が見つからない

私は自分自身の質問に答えるのが好きではありませんが、私はこの問題の解決策を見つけました。

  1. を表示INITそれは本当最終的な所望のフレームだと:

    webView = [[UIWebView alloc] initWithFrame:_desiredFrame]; 
    
  2. は、ビューポートのプロパティを追加し、画像の幅を設定するので、基本的にこれを行うために必要なもの

    (これはすべての可能なデバイスよりも大きく、コンテンツを2倍に伸ばすことはありません)ontouchstartを使用したスクリプトは、ビューからのスクロールとアップルの承認を防ぐことです。

    NSString *html = [NSString stringWithFormat:@"<html><head>" 
    "<script>document.ontouchstart = function(event) { event.preventDefault(); }</script>" 
    "<meta name=\"viewport\" content=\"width=1200\"/>" 
    "</head>" 
    "<body style=\"margin:0;padding:0;\">" 
    "<img style=\"width:1200px\" src=\"%@\" />" 
    "</body>" 
    "</html>",imageName]; 
    
  3. それが収まるようにコンテンツです拡張するビューを教える:

    webView.scalesPageToFit = YES; 
    

を、あなたは自分のものを読み込むことができます! 後でビューのプログラムのサイズを変更する必要がある場合はどうすればいいかわかりません。あなたがよりよい解決策を持っているか、または知っている場合、私は解決策を感謝

+0

こんにちは、私はあなたがwebviewで作業しているのを見ましたが、おそらく最近のSDK 4.2を使用していると思いますか?あなたは今までにwebview全体のサイズを変更しなければならなかったのですか?もしそうなら、どうしましたか?私は2つの可能な解決策をオンラインで見つけました。どちらも4.2で動作しませんでした。経験があれば、私はそれを共有していただければ幸いです:) – Shade

+0

実際には、コンテンツが読み込まれた後にwebviewのサイズを変更しません。私はおそらく、この場合にwebviewをリロードします。あなたが言及した2つのソリューションを共有できますか?たぶん私はあなたの必要性を誤解しました。また、私は4.2 SDK(下位互換性を持つ)を使用します – Julien

+0

更新されたバージョンは、おそらくStackOverflow IMHOで最も有用な答えです! :-) –

2

一つ素晴らしく、簡単な解決策は、あなたのHTMLに<head>タグこのコードを配置することである。ここでは

<meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0" /> 

を、あなたは、ズームスケールを定義することができますと幅。

関連する問題