Uso de imágenes Retina en un UIWebView local

Por alguna razón, no puedo obtener un UIWebView para "jugar bien" con mis nuevas imágenes Retina. El problema, paso a paso:Uso de imágenes Retina en un UIWebView local

Estoy cargando una serie de archivos de ayuda HTML del paquete. Mi código carga diferentes archivos HTML si es un iPhone 4 (LWERetinaUtils a continuación es una clase de utilidad que he escrito). He leído in this question que no es posible que UIWebView detecte automáticamente el indicador @ 2x, y lo experimenté personalmente, de ahí este enfoque.

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

La única diferencia entre el contenido de [email protected] y foo.html es que las etiquetas de imagen se refieren a las imágenes de mayor resolución.

Entonces, cargo mi UIWebView así:

_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: es sólo un método de ayuda que escribí para decirle al UIWebView para cargar el contenido del archivo.

Hasta aquí todo bien, mi se carga el contenido de manera diferente entre el iPhone y el iPhone 4 Simulador Simulador - y no cómo yo esperaría.

El texto aparece exactamente el mismo tamaño - pero las imágenes de la retina parece ser ampliadas (se ven pixeladas), y vuela fuera del extremo derecho de la pantalla.

He probado el:

_webView.scalesPageToFit = YES

propiedad, y, efectivamente, lo que hizo que las imágenes aparecen correctamente (al menos no pixelada). Pero, entonces mi texto era minúsculo (ya que la vista web me había alejado bastante).

¿Alguien sabe cómo evitar este tipo de problema? He visto algunas soluciones de Javascript (like this), pero parecen ser solo "intercambio de imágenes", que es lo que ya he hecho anteriormente, por lo que debería funcionar, ¿no?

Por último, en los archivos HTML, aquí es la forma en que me refiero a las imágenes:

<img src="[email protected]" border="0" title="Welcome!" class="title"/>

Y el CSS:

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

pongo la etiqueta de anchura en la CSS - se no parece cambiar nada

Fuente

2010-10-27 makdad

Sería de gran ayuda para ver un fragmento de código HTML. Cómo configuras UIWebView no importa para la escala de la imagen. Todo está en HTML/CSS/JS. – Mike

Mike, agregado a petición suya: – makdad

Quizás mi respuesta a una pregunta similar sea interesante http://stackoverflow.com/questions/3724058/uiwebview-and-iphone-4-retina-display/7741453#7741453. Utiliza Javascript para cargar imágenes escaladas y establecer el ancho correctamente y las costuras funcionan bien con las imágenes locales al menos. –

Asegúrese de especificar el alto y el ancho en sus etiquetas <img>. Ciertamente necesitas al menos ancho para que esto funcione.

Fuente

2010-10-27 13:23:40 Mike

Mike - Creo que pude haber visto eso. Tienes razón, actualmente no estoy haciendo eso. Pregunta dos: para las imágenes de Retina, ¿estoy especificando el ancho de píxel "real" o el ancho de píxel "percibido"? Voy a dar una oportunidad. – makdad

Esto funcionó. En respuesta a mi propia pregunta (y nadie más escribió sobre esto, espero poder ayudar a otra persona): La propiedad ANCHO de la etiqueta IMAGEN debe establecerse en el ancho de la imagen ORIGINAL (no de alta definición). – makdad

Esta respuesta funciona lo suficientemente bien para imágenes en línea estándar, pero ¿qué pasa con las imágenes de fondo CSS? Esos no parecen funcionar bien tampoco, y no es tan fácil establecer su ancho y alto. ¿Alguna idea? – Axeva

Si no se preocupan por dejar que el cambio de tamaño mango WebKit (encogimiento) las imágenes en la disminución de la población de los dispositivos que no son de la retina, que sólo puede hacer esto:

sólo proporciona imágenes @ 2x.
Especifique el tamaño de imagen nominal (no de alta definición) en su etiqueta IMG, o con la propiedad de tamaño de fondo CSS3.

Fuente

2012-09-17 17:49:42

Uso de imágenes Retina en un UIWebView local

Respuesta

Cuestiones relacionadas