Allow zooming within iFrame but not on page in iOS

Question

I have a simple page with

<meta name="viewport" id="extViewportMeta" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

on it, with everything sized nicely to display on an iPhone.

But when I put an iframe on that page, everything inside the iFrame is not zoomable, and scales to the size of the parent page.

How can I allow zooming within the iframe only, without messing with the rest of my page?

Answer 1

What you are requesting is unfortunately not possible.

First off, in you 'viewport' meta tag, your "content" attribute is specifying that the user of your website CAN NOT zoom at all. That is what the 'user-scalable=no' dictates.

Also, your maximum-scale and minimum-scale is set to 1, so even if you remove the 'user-scalable=no', the zooming would disabled by the fact that you there is no scaling range for the user to zoom within.

So to enable zooming for the user you will have to remove the user-scalable=no and set different min and max scale values.

See this link to better understand the settings for the 'viewport' meta tag:

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Secondly, since your 'viewport' meta tag is set on your 'parent' page, these settings apply to anything within that page, i.e the iframe too. Whether the iframe has a different meta 'viewport' tag specifying different settings does not matter since it lives within and abides by the settings of its parent.

Answer 2

This is possible via jQuery. Bind the zooming and panning events to not do anything when zooming and panning outside the divs that you allow zooming and panning. Then for the divs you want to allow zooming and panning, you can use plugins like Panzoom that use "CSS3 transforms and matrix functions" to allow for zooming and panning.