HTML & CSS
I'm working on my first mobile site and need to make an image pinch zoomable.
I read that including this meta tag will enable it:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
My questions are:
Which of those attribute enables it?
With that meta tag, if I display an image, say 600 x 1000, on an iphone screen, will it just automatically scale down to fit the screen, and automatically be pinch zoomable?
Pinching/zooming is enabled by default, isn't it? It's more a case of whether or not you prevent it.
If you use this:
you will prevent the user from zooming in, which is a bad idea for a website. (There may be some apps for which it's appropriate, but I doubt any website can justify this.)
Ok, I didn't ask the right question but you still solved the problem! thanks.
So, this design does call for pinch/zoom of the site to be DISabled. But in the design some images need to be pinch/zoom ENabled. So how do you enable pinch/zoom for single images?
I think that's called 'keeping your cake and eating it too'. But I could be wrong. One thing that comes to mind is some kind of JS script that shows a larger image upon clicking on the image.
i'll google a bit and post if i find anything..
This topic is now closed. New replies are no longer allowed.