On a web-app I am developing I would like the user to be able to pinch zoom in and out of a high resolution image. The client would like this to work on iPads, but it would be best if it was multi platform.
My plan was to create the the image at 1000px x 1000px and display it on the page at 100px x 100px (for example) using CSS. The user would then be able to zoom in and out of the image to see it in greater detail.
I’ve noticed that when you zoom into the image, the size increases but the detail doesn’t as it appears that Safari resizes the image upon rendering the page. Is there anything I can do to get around this?
You can try adding the following code
<meta name="viewport" content="initial-scale=0.1; maximum-scale=1.0; user-scalable=yes>Try playing around with various values for the scale until you hit the exact thing you want.
Hope that helps you..