Enable pinch zoom on mobile with meta tag

HTML & CSS
1

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?

2

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:

maximum-scale=1.0, user-scalable=no;

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.)

3

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?

4

I think that’s called ‘keeping your cake and eating it too’. :smiley: 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.

5

ok :slight_smile:

i’ll google a bit and post if i find anything…

thanks!