Controlling pinch zoom and isolating it to one element in Mobile Safari/iOS/iPad

8
votes

Is there a Mobile Safari, HTML or CSS tag or property to restrict touch pinch-zooming and panning to only one element on the page? For example I want to be able to zoom in and out of an image or div element, but have various other elements on the page stay both in place and the same size. This would probably work by restricting panning and scrolling through the viewport meta tag, and then saying I can do it but only on a specific element. Any help would be greatly appreciated.

1
htmliosipadmobilesafari

1 Answers

-2
votes

I'm pretty sure that you would do this.
Code:
HTML:

<div class="zoom">You can zoom here!</div>
<div class="nozoom">No zooming here!</div>

CSS:

.zoom{font-size: 36px; overflow: auto; height: 100px; width: 100px; border: 1px solid black}
.nozoom{font-size: 36px; overflow: hidden; height: 100; height: 100px; width: 100px; border: 1px solid black}