桌面和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浏览器本身做，有什么可以做的。