MobileSafari gibt über JavaScript nicht die richtigen Informationen zur Bildgröße zurück

Question

Sep 23, 2012, 10:57 PM

MobileSafari gibt über JavaScript nicht die richtigen Informationen zur Bildgröße zurück

Ich habe ein HTMLTestseite für dieses Problem hier. Aus irgendeinem GrundMobileSafari meldet dieImage.width/height Eigenschaften eines Bildes mit mehr als 1700 Pixeln als der Hälfte seines Wertes. Das heißt, diewidth Die JPG-Eigenschaft ist beispielsweise 2000, aber MobileSafari JavaScript meldet sie als 1000. Wenn ich denselben Code mit einem 1700 Pixel breiten Bild versuche, erhalte ich die richtige Breite.

Der Test Ich habe zwei Bilder geladen (dasselbe Bild in verschiedenen Dimensionen) und die Werte für die JavaScript-Größe angezeigt. Ich habe versucht in:

Chrome 22, Safari 5.1.7, Firefox 15.0.1, alle unter Mac OS X 10.6.8 (richtige Größe)iOS Simulator 4.3 SDK 3.2 (falsche Größe)iPad 2 mit iOS 5.1 (falsche Größe)iPhone 4S mit iOS 5.1 (falsche Größe)

Irgendwelche Ideen, warum das passiert? Vermisse ich irgendwo eine Einstellung? Warum funktioniert es mit einigen Bildern, aber nicht mit anderen?

Der Test ist hier:http://still-island-1941.herokuapp.com/sizetest.html

Dies ist der JavaScript-Code:

    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;
    }

Dies ist der HTML-Code:

<!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>