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

image width and height different between desktop and iPad on webpage?

本文关键字：高度 图像 iPad 网页 桌面      更新时间：2023-09-26

我写了一个简单的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);
}

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

我做了一个你可以玩的例子。它是预先编写使用onclick，但如果你删除这些onclick属性和取消注释的jQuery代码，你会发现它警告相同的值。

你应该尝试避免图像缩放，将图像放置在CSS不影响其大小的页面上(作为测试，尝试制作一个只包含图像的空白页面)，并删除任何自定义高度/宽度属性，如果它们存在的话。

否则，如果缩放是由iPad Safari浏览器本地完成的，那么您可以做的就很少了。

相关文章：