web-dev-qa-db-ja.com

HTMLコンテンツはズームアウトせずにUIWebviewに適合

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

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

更新

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

これは何が起こっているかです：

enter image description here

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

オリジナルのHTMLは here にあります。

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

iphoneobjective-cuiwebview
51
Abs

あなたがすることは次のとおりです。

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];
131
mprivat

これを追加してください：

webView.scalesPageToFit = YES;
57
Denis

私のために働いたのは、Interface BuilderでUIWebViewを選択し、「ページを合わせる」というボックスをチェックすることでした：

enter image description here

5
Chris Livdahl

通常、ビューポートメタタグを使用する必要があります。ただし、主にクロスプラットフォームの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   
}

編集：

ページのソースを見ると、Webエディターで作成したようです。

わかった。メイン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">
5
Martin
@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
1
Werner Altewischer

スウィフト3：

この拡張機能を使用して、Webビューのサイズに応じてWebビューのコンテンツのサイズを変更します。

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()
1
aashish tamsya

HTMLから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インスタンスを介して表示します：

[NSAttributedString parseHTML:htmlString withCompletion:^(NSAttributedString *parseResult, NSError *error) {
        bodyTextView.attributedText = parseResult;
}];

ただし、この方法では一部のレイアウト機能が破損する可能性があります。

0
nrx