Question

i’m writing a website on which everything should be able to be zoomed except of one object.
Is it possible to prevent only this object from being zoomed (typical pinch gesture on ipad, iphone)? (I know you shouldn’t do this because zoom should entlarge everything on the page… but i don’t know a way around.)

It has only to run on mobile safari.

Thanks for your help.

Answer 1

In order to do this, you need to be able to detect the zoom, which is not possible… at least, not directly. This post introduces a rather novel way of detecting the zoom level by using javascript to compare the width ratio of two divs on the page: one with a pixel-defined width and the other with a percentage-defined width. When the user pinches/zooms, the pixel width will not change, but the percent width will, so if you use javascript to detect the offset width of these two objects and get the ratio you can get the zoom. Then, if the ratio is, say, 150%, you can change change the width and height of you “fixed” object (using javascript) and multiplying each by .66666.

The major challenge you face here is that you cannot detect the moment of a zoom, so you’d have to use a setInterval() call to constantly be checking the ratio of the two test divs.