Использование изображения сетчатки в локальном UIWEBVIEW

StackOverflow https://stackoverflow.com/questions/4031537

Вопрос

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

Я загружаю серию файлов HTML Help из пучка. Мой код загружает разные файлы HTML, если это iPhone 4 (LWERetinaUtils Ниже приведен письменный класс UTIL). я прочитал В этом вопросе Чтобы UIWEBVIVE невозможно автоматически обнаруживать индикатор @ 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 Состоит в том, что теги изображения относятся к изображениям более высокого разрешения.

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

  _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 и iPhone 4 Simulator - а не как я ожидал.

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

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

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

Я положил бирку ширины в CSS - это, похоже, ничего не меняет.

Это было полезно?

Решение

Убедитесь, что вы указываете высоту и ширину на вашемu003Cimg> Теги. Вам, безусловно, нужно по крайней мере шириной, чтобы сделать эту работу.

Другие советы

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

  1. Просто предоставьте @ 2x изображения.
  2. Укажите размер отображения номинального (не высокого DEF) в вашем теге IMG или с свойством фонового размера CSS3.
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top