image size on mobile

Report · Dec 15, 2018

Greetings Coding experts, thanks for looking at this post.

I’m trying to make the size of a coin appear its actual size on mobile, specifically I been testing with iphone6 plus.

The size of the coin image is 2000px. The coin's actual dem's are 146px or 38mm; easily would fit on a iphone screen.

I specified 146px length and width properties on the image tag. The image is accurate on desktop and ipads, but it scales down on iphone.

I have tried different containers, no containers, using vw and vh. I can not get the image to show its real size on iphone.

In my last attemp I scaled down the original image 146px. (attached) Iphone shrinks this image and of course it is very dim.

The meta tag is in the head. Removing it increases the shrinking tremendously.

I'm trying to avoid media queries, calculating for every device ect.

Here is the file-code which I'm using for testing and is on server listed below code

Thanks for your suggestions…jw

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

HTML file on a remote server and the image below which is actual size:

http://collection.fairwaysit.com/testpage.html

image:

Report · Dec 15, 2018

Move the image size to css then specify the image size in mm.

so you would have -

img {

width: 38mm;

height 38 mm;

}

mm is a valid unit of measurement in css.

Report · Dec 15, 2018

There might be issues with the size of the image canvas. I'm assuming that 38 millimeters is the radius of the actual coin, while the image of the coin might be different?

Report · Dec 15, 2018

With any 'actual' size image on the web, the word 'actual' should never be used. Maybe say 'approximate'?

Report · Dec 15, 2018

Yeah 🙂

Report · Dec 15, 2018

You cannot predict what zoom level people are using to view your online images. When I'm selling items, I like to shoot objects on a mat with a ruler to show its scale. For smaller items, it's often necessary to zoom the camera lens in quite a bit to show details. For larger items it's the opposite. So the image is rarely if ever the item's actual size.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

image size on mobile

1 Correct answer