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

I wrote a simple javascript code to load an image and alert its width and height, but I found its width and height will different between desktop and iPad.

For example, I load an image that size is 8000*1845, browser shows image width is 8000 and height is 1845. Therefore, on iPad, browser show image width is 2000 and height is 462.

The other image is 2600 * 2400, browser shows image width is 2000 and height is 2400, but it shows image width is 1300 and height is 1200.

I don't know whether I misunderstanding something or not. Will iOS downsize the image?

Anybody knows? Please tell me what happen?

var img8000 = new Image();
img8000.src = '8000_1845.jpg';
img800开发者_如何学JAVA0.onload = function () {
    alert(img8000.width + ' ' + img8000.height);
}

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

When you get the image's height or width using this.width or when using jQuery's $(this).width() you are actually getting its current dimensions. If the image is scaled up or down, then the values you get will not match the actual source image's dimensions.

I made an example you can play with. It is pre-written to use onclick, but if you remove those onclick attributes and uncomment the jQuery code, you'll find it alerts the same values.

You should attempt to avoid image scaling by placing the image somewhere on the page where the CSS does not affect its size (as a test, try making a blank page containing just the image), and remove any custom height/width attributes if they exist.

Otherwise, if the scaling is done natively by the iPad Safari browser, there is little you can do.