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

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

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

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

Единственное различие между содержимым [email protected] и 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 - и не так, как я ожидал.

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

Я пробовал:

_webView.scalesPageToFit = YES

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

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

Наконец, в файлах HTML я имею в виду изображения:

<img src="[email protected]" 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;}

Ставлю в CSS тег ширины - вроде ничего не меняет.


person makdad    schedule 27.10.2010    source источник
comment
Было бы полезно увидеть фрагмент вашего HTML-кода. То, как вы настраиваете UIWebView, не имеет значения для масштабирования изображения. Все это в HTML / CSS / JS.   -  person Mike    schedule 27.10.2010
comment
Майк, добавил по вашей просьбе-   -  person makdad    schedule 28.10.2010
comment
Может быть, мой ответ на аналогичный вопрос интересен stackoverflow.com/questions/3724058/. Он использует Javascript для загрузки масштабированных изображений и правильной установки ширины, а швы отлично работают, по крайней мере, с локальными изображениями.   -  person Mattias Wadman    schedule 12.10.2011


Ответы (2)


Убедитесь, что вы указываете высоту и ширину в своих тегах ‹img›. Для работы вам определенно понадобится как минимум ширина.

person Mike    schedule 27.10.2010
comment
Майк - думаю, я мог это видеть. Вы правы, я сейчас этим не занимаюсь. Вопрос второй - для изображений Retina я указываю реальную ширину в пикселях или воспринимаемую ширину в пикселях? Я попробую. - person makdad; 28.10.2010
comment
Это сработало. Отвечая на мой собственный вопрос (и никто больше не писал об этом, поэтому я надеюсь, что смогу помочь кому-то другому): для свойства WIDTH в теге IMAGE должно быть установлено значение ORIGINAL (non-high-def) width image. - person makdad; 28.10.2010
comment
Этот ответ работает достаточно хорошо для стандартных встроенных изображений, но как насчет фоновых изображений CSS? Кажется, они тоже не работают должным образом, и установить их ширину и высоту не так-то просто. Есть предположения? - person Axeva; 10.12.2010
comment
Вы должны указать свойство CSS размера фона для спрайтов, то есть при использовании фоновых изображений CSS. - person Mike; 10.12.2010

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

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