2010-10-27 3 views
10

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

Я загружаю серию файлов справки HTML из комплекта. Мой код загружает разные HTML-файлы, если это iPhone 4 (LWERetinaUtils ниже - класс использования, который я написал). Я прочитал in this question, что 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-решений (like this), но они, похоже, просто «обмениваются фотографиями», что я уже делал выше, поэтому он должен работать, нет?

Наконец, в 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 - это похоже, ничего не меняет.

+0

Это поможет увидеть фрагмент кода HTML. Как настроить UIWebView не имеет значения для масштабирования изображения. Это все в HTML/CSS/JS. – Mike

+0

Майк, добавленный по вашему запросу- – makdad

+0

Возможно, мой ответ на аналогичный вопрос интересен http://stackoverflow.com/questions/3724058/uiwebview-and-iphone-4-retina-display/7741453#7741453. Он использует Javascript для загрузки масштабированных изображений и правильной настройки ширины, и швы отлично работают с локальными изображениями. –

ответ

11

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

+0

Майк - Кажется, я видел это. Вы правы, я сейчас этого не делаю. Второй вопрос - для изображений Retina я определяю «реальную» ширину пикселя или «воспринимаемую» ширину пикселя? Я сделаю это. – makdad

+5

Это сработало. В ответ на мой собственный вопрос (и никто больше не писал об этом, поэтому я надеюсь, что смогу помочь кому-то еще): Свойство WIDTH в теге IMAGE должно быть установлено в ширину изображения ORIGINAL (не высокого уровня). – makdad

+0

Этот ответ работает достаточно хорошо для стандартных встроенных изображений, но как насчет фоновых изображений CSS? Кажется, что они тоже не работают должным образом, и установить их ширину и высоту не так просто. Есть предположения? – Axeva

6

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

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