54

を使用しUIWebViewて HTML をレンダリングしています。ただし、私の webview の幅は 320 ですが、HTML はまだ全幅で表示され、水平にスクロールできます。

ズームアウトせずにその幅内にすべてのコンテンツを収めるネイティブ メール アプリケーションと同じことを達成したい - ネイティブ メール アプリケーションはどのように HTML をこのようにレンダリングするのでしょうか?

アップデート

ビューポート メタ タグを使用すると役立つと思いましたが、これを機能させることができませんでした。

これが起こっていることです：

ここに画像の説明を入力

ご覧のとおり、コンテンツはデバイスの幅に収まりません。私は非常に多くのviewportメタタグの組み合わせを試しました。以下は、Martin の提案を試したときに何が起こるかの例です。

元の HTML はここにあります。

この HTML がネイティブ メール アプリケーションによってレンダリングされる方法は、そのようなものです。

4

8 に答える 8

133

行うことは次のとおりです。

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];
于 2012-05-22T13:00:02.650 に答える
57

これを追加するだけです：

webView.scalesPageToFit = YES;
于 2013-03-06T06:41:42.750 に答える
6

通常、viewport メタ タグを使用する必要があります。しかし、主にクロスプラットフォームの Web ページが必要な場合は、その使用は非常に不安定です。

また、所有しているコンテンツと 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">
于 2012-05-22T09:50:09.100 に答える
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
于 2015-07-29T13:45:18.237 に答える