2012-05-09 19 views
5

Parece que tenemos un problema con el hecho de que las imágenes en los escritorios se muestran correctamente en posición vertical, pero en un iPad se giran al paisaje. Tras una investigación más exhaustiva, parece que el iPad mira la información de rotación de los datos EXIF ​​de la imagen y determina que se muestre en paisaje en lugar de en retrato (que es lo que realmente necesita).¿Cómo puedo obligar a iOS Safari a ignorar la rotación EXIF?

¿Hay alguna manera de manejar esto sin descargar todos los miles y miles de imágenes, eliminando los datos EXIF ​​y volviéndolos a cargar a nuestro proveedor de la nube?

Respuesta

3

Esto es extremadamente extraño, pero por alguna razón: cuando coloca una imagen absolutamente por encima de un elemento de video (incluso una etiqueta de video vacía), entonces una imagen con rotación EXIF ​​¡no rota!

<video></video> 
<img src="url.jpg" style="position:absolute;top:0;left:0" /> 

Probado en IOS 5.1 Iphone 4. (espero que nadie va a presentar esto como un error;)).

+0

Encontré que si la imagen girada está absolutamente posicionada, informará 'naturalWidth' y' naturalHeight' en los valores girados, pero se mostrará sin girar. –

3

Usando jQuery, es mucho más corto, estructura HTML:

<a href="foo" style="width:100px; height:100px;"> 
    <img src="bar" style="position:absolute; width:100px; height:100px; top:0; left:0;"> 
</a> 

Javascript:

setTimeout($.proxy(function(){ 
    this.css("position", ""); 
}, $('<video style="visibility:hidden; position:absolute; width:1px; height:1px">').before("img")), 0); 

Nota: El tiempo de espera evita errores de visualización, donde las posiciones son incorrectos veces.

funciona como un encanto en iOS 7.1, 7,0 y 6.1!

+0

Esto funciona para mí, sin embargo, distorsiona la imagen ya que la mía no es un cuadrado perfecto como 100px por 100px. Hace que el ancho sea lo que hubiera sido con la imagen hacia los lados (la imagen es más alta que ancha). – Tricky12

+0

La altura y el ancho de las etiquetas img y a son realmente ejemplares. El ejemplo utiliza una img de posición absoluta que se recortaría con el ancla circundante. Debería funcionar con diferentes tamaños o incluso sin ninguno. Parece ser importante que la etiqueta de video vacía esté justo al lado de la etiqueta img. – shoesel

Cuestiones relacionadas