Tengo una test page for this issue here HTML. Por alguna razón MobileSafari está reportando los Image.width/height propiedades de cualquier imagen con más de 1.700 píxeles como la mitad de su valor. Es decir, la propiedad width del JPG es, digamos, 2000, pero MobileSafari JavaScript la informa como 1000. Si intento el mismo código con una imagen de 1700px, obtengo el ancho correcto.MobileSafari no devolver la información de tamaño de imagen de la derecha a través de JavaScript
The test lo hice cargas dos imágenes (misma imagen en diferentes dimensiones) y muestra los valores de tamaño de JavaScript. Probé en:
- Chrome 22, Safari 5.1.7, Firefox 15.0.1 todo en Mac OS X 10.6.8 (tamaño correcto)
- simulador de iOS 4.3 SDK 3.2 (tamaño incorrecto)
- iPad 2 con iOS 5.1 (tamaño incorrecto)
- iPhone 4S con iOS 5.1 (tamaño incorrecto)
Cualquier idea por qué está sucediendo esto? ¿Me estoy perdiendo un ajuste en alguna parte? ¿Por qué funciona con algunas imágenes pero no con otras?
La prueba está aquí: http://still-island-1941.herokuapp.com/sizetest.html
Este es el código JavaScript:
var imgBig, imgSmall;
function init() {
imgBig = new Image();
imgBig.onload = handleBig;
imgBig.src = "/images/size.jpg";
imgSmall = new Image();
imgSmall.onload = handleSmall;
imgSmall.src = "/images/test1.jpg";
document.getElementById("browser").innerHTML = navigator.userAgent;
}
function handleBig() {
document.getElementById("dimensionsBig").innerHTML = imgBig.width + "x" + imgBig.height;
document.getElementById("testBig").src = imgBig.src;
}
function handleSmall() {
document.getElementById("dimensionsSmall").innerHTML = imgSmall.width + "x" + imgSmall.height;
document.getElementById("testSmall").src = imgSmall.src;
}
Este es el código HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>MobileSafari image dimensions test</title>
</head>
<body onload="init()">
<p>your browser: <strong><span id="browser"></span></strong></p>
<p>big image dimensions: <strong><span id="dimensionsSmall"></span></strong> (should be 1700x1134)</p>
<img id="testSmall" />
<p>small image dimensions: <strong><span id="dimensionsBig"></span></strong> (should be 2000x1334)</p>
<img id="testBig" />
</body>
</html>
En mi caso yo estaba loadi ng una imagen de 3000 píxeles cuadrados, y Javascript en iOS me decía que el evento de carga había disparado bien, aunque la altura y el ancho informados en ese momento eran cero. Supongo que tengo el mismo problema. –