7

我在这里有一个针对这个问题的 HTML 测试页。出于某种原因，MobileSafari 将Image.width/height任何超过 1700 像素的图像的属性报告为其值的一半。也就是说，widthJPG 的属性是 2000，但 MobileSafari JavaScript 将其报告为 1000。如果我使用 1700 像素宽的图像尝试相同的代码，我会得到正确的宽度。

我所做的测试加载了两个图像（不同尺寸的相同图像）并显示 JavaScript 大小值。我试过了：

  • Mac OS X 10.6.8 中的 Chrome 22、Safari 5.1.7、Firefox 15.0.1（大小正确）
  • iOS 模拟器 4.3 SDK 3.2（大小不正确）
  • 装有 iOS 5.1 的 iPad 2（尺寸不正确）
  • 装有 iOS 5.1 的 iPhone 4S（尺寸不正确）

任何想法为什么会发生这种情况？我在某处缺少设置吗？为什么它适用于某些图像而不适用于其他图像？

测试在这里：http ://still-island-1941.herokuapp.com/sizetest.html

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

这是 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>
4

1 回答 1

6

是的，它存在尺寸和重量的限制。

由于 iOS 上的可用内存，它可以处理的资源数量存在限制：

对于RAM 小于 256 MB 的设备，解码的 GIF、PNG 和 TIFF 图像的最大大小为3 兆像素，对于 RAM 大于或等于 256 MB 的设备，最大大小为 5 兆像素。也就是说，对于 RAM 小于 256 MB 的设备，请确保width * height ≤ 3 * 1024 * 1024 。请注意，解码后的大小远大于图像的编码大小：

JPEG的最大解码图像大小为 32 兆像素，使用二次采样。由于二次采样，JPEG 图像最高可达 32 兆像素，这允许 JPEG 图像解码为像素数十六分之一的大小。对大于 2 兆像素的 JPEG 图像进行二次采样，即解码为缩小的尺寸。JPEG 二次采样允许用户查看来自最新数码相机的图像。

对于 RAM 小于 256 MB 的设备，画布元素的最大大小为 3 兆像素，而对于 RAM 大于或等于 256 MB 的设备，画布元素的最大大小为 5 兆像素。如果未指定，画布对象的高度和宽度为 150 x 300 像素。

一些可以帮助的链接：

干杯

于 2012-10-05T14:58:19.603 回答