MobileSafari nie zwraca odpowiednich informacji o rozmiarze obrazu za pomocą JavaScript

Question

Sep 23, 2012, 10:57 PM

MobileSafari nie zwraca odpowiednich informacji o rozmiarze obrazu za pomocą JavaScript

Mam HTMLstrona testowa tego problemu tutaj. Z jakiegoś powoduMobileSafari zgłaszaImage.width/height właściwości dowolnego obrazu z ponad 1700 pikselami jako połową jego wartości. To jestwidth Właściwość JPG wynosi, powiedzmy, 2000, ale JavaScript MobileSafari zgłasza ją jako 1000. Jeśli spróbuję tego samego kodu z obrazem o szerokości 1700 pikseli, otrzymam prawidłową szerokość.

Test Załadowałem dwa obrazy (ten sam obraz w różnych wymiarach) i wyświetla wartości rozmiaru JavaScript. Próbowałem w:

Chrome 22, Safari 5.1.7, Firefox 15.0.1 wszystko w systemie Mac OS X 10.6.8 (prawidłowy rozmiar)iOS Simulator 4.3 SDK 3.2 (nieprawidłowy rozmiar)iPad 2 z iOS 5.1 (nieprawidłowy rozmiar)iPhone 4S z systemem iOS 5.1 (nieprawidłowy rozmiar)

Jakieś pomysły, dlaczego tak się dzieje? Czy gdzieś brakuje mi jakiegoś miejsca? Dlaczego działa z niektórymi obrazami, ale nie z innymi?

Test jest tutaj:http://still-island-1941.herokuapp.com/sizetest.html

To jest kod 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;
    }

To jest kod 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>