Содержимое HTML соответствует UIWebview без масштабирования

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

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

Update

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

Это то, что происходит:

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

Оригинальный HTML-код можно найти здесь.

Способ отображения этого HTML с помощью собственного почтового приложения выглядит так.

Ответы

Ответ 1

Вот что вы делаете:

В вашем контроллере пользовательского интерфейса, которому принадлежит веб-представление, сделайте его 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];

Ответ 2

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

webView.scalesPageToFit = YES;

Ответ 3

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

Это также зависит от того, какой контент и css у вас есть.

Для моей домашней страницы iPhone, которая должна автоматически изменяться от портрета к lanscape, я использую это:

<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 > 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">

Ответ 4

Что сработало для меня, так это выбрать UIWebView в Interface Builder и установить флажок "Scales Page To Fit":

Ответ 5

@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

Ответ 6

Swift 3:

Используйте это расширение для изменения размера содержимого веб-браузера в зависимости от размера веб-представления.

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()