桌面和iPad在网页上的图像宽度和高度不同？

Question

我写了一个简单的javascript代码来加载图像并提醒其宽度和高度，但我发现它的宽度和高度在桌面和iPad之间会有所不同。

例如，我加载的图像大小为8000 * 1845，浏览器显示图像宽度为8000，高度为1845.因此，在iPad上，浏览器显示图像宽度为2000，高度为462。

另一张图片是2600 * 2400，浏览器显示图片宽度为2000，高度为2400，但显示图片宽度为1300，高度为1200.

我不知道我是否误解了某事。 iOS会缩小图像尺寸吗？

有人知道吗？请告诉我发生了什么？

var img8000 = new Image();
img8000.src = '8000_1845.jpg';
img8000.onload = function () {
    alert(img8000.width + ' ' + img8000.height);
}

var img2600 = new Image();
img2600.src = '2600_2400.jpg';
img2600.onload = function () {
    alert(img2600.width + ' ' + img2600.height);
}

Answer 1

使用this.width或使用jQuery $(this).width()获取图像的高度或宽度时，实际上是获得当前尺寸。如果图像按比例放大或缩小，则您获得的值将与实际源图像的尺寸不匹配。

我做了example你可以玩。它是预先编写的，可以使用onclick，但如果你删除那些onclick属性并取消注释jQuery代码，你会发现它会提醒相同的值。

您应该尝试通过将图像放置在CSS不影响其大小的页面上的某个位置来避免图像缩放（作为测试，尝试制作仅包含图像的空白页面），并删除任何自定义高度/宽度属性如果它们存在。

否则，如果缩放是由iPad Safari浏览器本机完成的，那么你几乎无法做到。