HTML-контент помещается в UIWebview без уменьшения

Я используюUIWebView визуализировать некоторый HTML. Однако, хотя ширина моего веб-просмотра составляет 320, мой HTML-код по-прежнему отображается во всю ширину и его можно прокручивать по горизонтали.

Я хочу добиться того же, чего достигает собственное почтовое приложение, то есть оно вписывается во все содержимое в пределах этой ширины без уменьшения масштаба - как собственное почтовое приложение отображает HTML следующим образом?

Update

Я думал, что использование метатега viewport поможет, но я не смог заставить это работать.

Вот что происходит:

enter image description here

Как видите, содержание не соответствует ширине устройства. Я пробовал так много комбинацийviewport метатег. Ниже приведен пример того, что происходит, когда я пробую предложение Мартинса.

Оригинальный HTML можно найтиВот.

То, как этот HTML отображаетсяnative mail application is like so.

Ответы на вопрос(7)

Просто добавьте это:

webView.scalesPageToFit = YES;

Swift 3:

Use this extension to resize contents of webview according to size of a 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
    }
}

How to invoke?

webViewOutlet.resizeWebContent()

NSAttributedString из HTML (сделайте это на заднем плане):

@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;
}];

Однако некоторые функции макета могут испортить этот подход.

@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

В вашем контроллере пользовательского интерфейса, который владеет веб-представлением, сделайте егоUIWebViewDelegate. Then where you set the URL to load, set the delegate as the controller:

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: правильно установить уровень масштабирования:

This option will applicable from iOS 5.0 and >

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

что я выбрал UIWebView в Интерфейсном Разработчике и установил флажок «Масштабировать страницу по размеру»:

enter image description here

вы должны использовать метатег viewport. Но его использование очень нестабильно, особенно если вы хотите кроссплатформенную веб-страницу.

Это также зависит от того, какой контент и 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   
}

EDIT :

Видя исходный код вашей страницы, кажется, вы сделали это с помощью веб-редактора, не так ли?

Хорошо я понял. Ваш основной div имеет ширину 600 пикселей. Разрешение экрана iphone составляет 320x480. 600 & gt; 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"> 

ВАШ ОТВЕТ НА ВОПРОС