UiWebView и iPhone 4 Retina Display

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

  •  03-10-2019
  •  | 
  •  

Вопрос

у меня есть UIWebView который отображает какой-то локальный текст и изображения. Либо я где-то допустил ошибку, или UIWebView не работает автоматически @2x Суффикс для изображений высокого разрешения.

Итак, мой вопрос есть кто-нибудь еще успешно загружен @2x Изображения в А. UIWebView Через нормальные средства или мне нужно сделать что-то особенное? Могу ли я как-то обнаружить, если у моего пользователя есть отображение сетчатки?

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

Решение

Согласно вашему запросу...

Тест на функциональность. Если вы хотите знать, если вам нужно отобразить изображение сетчатки или обычное изображение, то тестируйте, если у вашего устройства есть отображение сетчатки, не то, что это конкретная модель (будущее доказательство вашей приложения как можно лучше, значит, вы должны изменить Меньше вещей, когда выходит новая модель). Для этого вы можете использовать следующий образец код:

if([[UIScreen mainScreen] respondsToSelector:@selector(scale)] &&
   [[UIScreen mainScreen] scale] == 2.0)
{
    /* We have a retina display. */
}
else
{
    /* We do not. */
}

Этот код безопасен, поскольку время я написал это, на всех моделях и на всех версиях прошивки. Это будет безопасно на будущих версиях, пока Apple не обесценивает scale метод, который никогда не произойдет.

Больше на вашем вопросе, я не знаю, как это сделать в веб-просмотре, не имея местоположения на изображение сетчатки и изображения без сетчатки заранее. Как только у меня есть эта информация, у меня есть (в прошлом) использовали его, чтобы заменить некоторые известные сентинельские текст, которые на веб-странице ожидается, что я заменил, как в я бы поставил что-то в HTML, который сказал: {{{image_location}}} Откуда я могу загрузить данные HTML, получите его в строковый формат, затем выполните замену на эту строку, заменяющую этот текст, с URL-адресом изображения @ 2x, если мы находимся на дисплее сетчатки, с соответствующим шкалем или Изображение нормального размера, если нет (используя вышеуказанный код).

Надеюсь, это поможет, если никто не придет с лучшим решением.

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

Я использую этот взлом JavaScript для загрузки масштабированных изображений при работе на устройстве сетчатки. Это изменит src а также width Атрибут на всех изображениях для использования соответствующего масштабированного изображения. Обратите внимание, что я проверил только это с местными изображениями.

Параметр display: none а затем сбросить его на изображении нагружать швы, чтобы исправить мерцание. Также обратите внимание, что этот код, вероятно, не совместим с другими браузерами, чем WebKit.

document.addEventListener("DOMContentLoaded", function() {
  var scale = window.devicePixelRatio;
  // might want this to be scale != 2
  if (scale == undefined || scale == 1) {
    return;
  }

  var re = /^(.*)(\..*)$/;
  var images = document.getElementsByTagName("img");
  for (var i =  0; i < images.length; i++) {
    var img = images[i];
    var groups = re.exec(img.src);
    if (groups == null) {
      continue;
    }

    img.style.setProperty("display", "none");
    img.addEventListener("load", function(event) {
      event.target.width /= scale;
      event.target.style.setProperty("display", "");
    });
    img.src = groups[1] + "@" + scale + "x" + groups[2];
  }
});

Советы - добавить это в файл, называемый, например, scaledimages.js а затем использовать

<script type="text/javascript" src="scaledimages.js"></script>

Убедитесь, что JS-файл перечислен в «Copy Bundle Resources», а не в «Компилированных источниках» в ваших целях «Фазы сборки». По умолчанию XCode швов обнаруживают файлы JavaScript как то, что он любит компилировать. Также обратите внимание, что текущий скрипт может сломать вещи, если devicePixelRatio происходит 3 или больше в будущем, предосторожность может быть изменение (scale == undefined || scale == 1) к scale != 2 только нагрузка @2x на данный момент.

Обновлять: Есть также jquery-retina-дисплею-плагин это делает что-то подобное, но требует, чтобы вы установили width атрибут и швы, чтобы также использовать HEAD Запрос, чтобы увидеть, существует ли изображение, не уверен, как это будет работать для локальных файлов.

Предполагалось, что это также может быть достигнуто с помощью магии CSS или JavaScript, чтобы отобразить только соответствующее изображение. Основная идея состоит в том, чтобы вставить два изображения, нормальное и высокое разрешение, а затем для установки атрибута CSS отображать к никто Для картин в маску:

HTML-файл

<link href="default.css" rel="stylesheet" media="screen" type="text/css" />
<link href="highresolution.css" media="screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" rel="stylesheet" />

...

<img src="image.png"    width="..."   height="..."    class="normalRes" />    
<img src="image@2x.png" width="..."   height="..."    class="highRes" />

Файл CSS: default.csss

.normalRes { display:block } /* or anything else */
.highRes   { display:none  }

CSS-файл: highresolution.csss

.normalRes { display:none  }
.highRes   { display:block }  /* or anything else */

Я немного проверил его, и он работал хорошо. Нужно больше тестов сейчас. Я нашел решение здесь: http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport.

Обновление 2012-06-24

Вот еще одно решение без необходимости в Highresolution.csss. файл.
Добавьте следующий код в default.css.

@media all and (-webkit-min-device-pixel-ratio: 2) {

   .normalRes { display:none  }
   .highRes   { display:block }

   ...

Просто всегда делай:

<img src="image@2x.png" width={half-width} />

Для CSS ссылается фоновые изображения, используйте -webkit-background-size до полумана их.

Недостаток: Устройства без сетчатки будут загружать негабаритные изображения.

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

<img src="hi-res-icon.png" width="10px" height="10px" />

Что касается обнаружения, вы можете использовать этот код образец. Отказ Я только что обновил его, чтобы также обнаружить iPhone 4.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top