Вопрос по iphone, objective-c – HTML-контент помещается в UIWebview без уменьшения

49

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

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

Update

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

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

enter image description here

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

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

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

заполнить содержимое, используя тег div с минимальной шириной и высотой, а также с минимальной и максимальной шириной, и он будет корректироваться в соответствии с родительским содержимым Paresh Navadiya
я думаю, что вижу мои правки, это просто проблема с окном просмотра. Martin
захватите содержимое HTML и добавьте ширину = 320 пикселей в тег HTML-текста перед отображением страницы. У меня была похожая проблема, и это был единственный способ решить проблему. alinoz
@safecase Это не решение HTML. Мне нужно сделать это, используя target-c, раскадровку iPhone или конфиг uiwebview. Abs
Ваша веб-страница предназначена для iphone, или она используется мобильными и не мобильными пользователями? Martin

Ваш Ответ

7   ответов
57

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

webView.scalesPageToFit = YES;
у меня не работает iOS8.2
Это хорошо работает, если ваш контент отформатирован правильно. Однако, если вы хотите уменьшить содержимое, вы должны использовать выбранный ответ и немного его изменить (вычтите небольшое количество из ширины или высоты viewSize в зависимости от того, что вы хотите уменьшить. Поэтому это не имеет смысла). больше голосов.
для меня это работало намного лучше, у него не было проблемы, когда высота страницы была слишком большой, как принятый ответ.
Должен быть принят ответ.
Просто нашел это, и это спасло меня от часов разочарования. Не знаю, почему он не получил больше голосов.
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
Аргумент querySelector должен содержать экранированные кавычки вокруг окна просмотра, чтобы быть действительным JavaScript:document.querySelector('meta[name=\"viewport\"]')
Это не работает для WKWebView?
1

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()
попробуйте перезагрузить collectionView или вызовите layoutIfNeeded () для contentView of collectionView
пытаясь заставить это работать в collectionView, но не изменяя размеры ... какие-либо предложения?
func webViewDidFinishLoad (_ webView: UIWebView) {self.webView.resizeWebContent ()} Вызвать это в методе UIWebViewDelegate.
130

В вашем контроллере пользовательского интерфейса, который владеет веб-представлением, сделайте его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];
Я понимаю, что вы имеете ввиду. К сожалению, это может быть сделано только путем использования HTML. Вы можете видеть из своего скриншота, что это не сделано на уровне графики, потому что оно не все пропорционально. Это потому, что почтовое приложение, вероятно, меняет стиль. Я добавил опцию B в свой ответ, чтобы увидеть, как вы можете это сделать (не забудьте удалить делегата для этой опции, иначе он также попытается масштабировать).
это работает, так как я снял отметку со значения & quot; Scales Page To Fit & quot; Спасибо
@mprivate да, это похоже на работу! Можете ли вы рассказать мне больше о логике. Вы добавляете новый блок стиля, который устанавливает максимальную ширину для всех элементов? Если это так, если есть HTML с чистым макетом таблицы, это все еще будет работать? Или я неправильно понял? Abs
Да, это просто установка верхнего предела div. Я подозреваю, что тот же атрибут стиля может быть применен к тегу тела HTML. Я не пытался быть честным, но помню, что читал, что вы можете. Я предполагаю, что вам нужно будет внести некоторые изменения в стили для поддержки всех типов HTML-макетов, но я уверен, что вы поняли основную идею.
Большое спасибо за ответ. Так что я просто попробовал это, и это лучше. Однако происходит то, что контент помещается по ширине экрана устройства. Но текст маленький. Собственное почтовое приложение каким-то образом масштабирует текст и другие элементы, сохраняя при этом фиксированную ширину устройства. Есть идеи по этому поводу? Вот как собственное почтовое приложение отображает ту же электронную почту:dl.dropbox.com/u/50941418/iphone_ex.PNG Abs
0

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

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

5

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

enter image description here

5

вы должны использовать метатег 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"> 
Как насчет использования Javascript, чтобы сделать ваш текст больше? Когда страница загружена, вы можете использовать:- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script метод веб-просмотра
Спасибо за ваш ответ. Но я попробовал вышеуказанный метатег, и он не сработал. Смотрите обновление моего вопроса, Abs
Я попробовал новый метатег viewport, и он, кажется, достиг именно того, что делает ответ mprivat. Тем не менее, есть еще проблема. Смотрите мой комментарий к ответу mprivat. Кроме того, предполагается, что это приложение принимает другой HTML и отображает его так же, как это делает нативное почтовое приложение, поэтому я не уверен, что вычисление будет работать для всех электронных писем HTML. Abs

Похожие вопросы