Использование изображений Retina в локальном UIWebView - PullRequest
Новая
       19

Использование изображений Retina в локальном UIWebView

10 голосов
/ 27 октября 2010

По какой-то причине я не могу заставить UIWebView «хорошо играть» с моими новыми изображениями Retina. Вопрос, пошаговый:

Я загружаю серию файлов справки HTML из комплекта. Мой код загружает разные HTML-файлы, если это iPhone 4 (LWERetinaUtils ниже - это класс утилит, который я написал). Я прочитал в этом вопросе , что UIWebView не может автоматически обнаружить индикатор @ 2x, - и испытал это лично, отсюда и такой подход. 

if ([LWERetinaUtils isRetinaDisplay])
  htmls = [NSArray arrayWithObjects:@"foo@2x.html",@"bar@2x.html",nil];
else
  htmls = [NSArray arrayWithObjects:@"foo.html",@"bar.html",nil];

Единственная разница между содержимым foo@2x.html и foo.html заключается в том, что теги изображений относятся к изображениям с более высоким разрешением.

Затем я загружаю свой UIWebView так: 

  _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 375.0f)];
  _webView.delegate = self;
  [self _loadPageWithBundleFilename:self.filename];
  [self.view addSubview:_webView];

_loadPageWithBundleFilename: - это всего лишь вспомогательный метод, который я написал, чтобы сказать UIWebView загрузить содержимое из файла.

Пока все хорошо, мой контент загружается по-разному между iPhone Simulator и iPhone 4 Simulator - и не так, как я ожидал.

Текст отображается точно такого же размера, но изображения на сетчатке выглядят масштабированными (выглядят пикселизированными) и вылетают с правого края экрана.

Я попробовал: 

_webView.scalesPageToFit = YES

свойство, и, конечно же, оно заставляет изображения отображаться соответствующим образом (по крайней мере, не в пикселях). Но тогда мой текст был крошечным (поскольку я был довольно сильно уменьшен при просмотре в Интернете).

Кто-нибудь знает, как обойти эту проблему? Я видел несколько решений Javascript (, как это ), но они, кажется, просто «обмен изображениями», что я уже сделал выше - так что должно работать, нет ??

Наконец, в файлах HTML, вот то, как я ссылаюсь на изображения: 

<img src="welcome@2x.png" border="0" title="Welcome!" class="title"/>

И CSS: 

body{ margin:20pt; padding:10pt; line-height:38pt; font-size:24pt; text-align:left; background-color: transparent; font-family:Helvetica,sanserif; width:640pt;}

Я поместил тег width в CSS - похоже, он ничего не меняет.

Ответы [ 2 ]

11 голосов
/ 27 октября 2010

Убедитесь, что вы указали высоту и ширину в тегах image.Вам, безусловно, нужна как минимум ширина, чтобы сделать эту работу.

6 голосов
/ 17 сентября 2012

Если вам не нужно, чтобы WebKit обрабатывал изменение размера (сжатия) изображений на уменьшающемся населении устройств без сетчатки, вы можете просто сделать это:

  1. Просто предоставьте @ 2x изображения.
  2. Укажите номинальный размер изображения (не высокого разрешения) в теге IMG или с помощью свойства background-size CSS3.
...