Allow Zooming Within Iframe But Not on Page in iOS

Allow zooming within iFrame but not on page in iOS

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.

Web site does not allow zooming out or scrolling on iOS

Try searching on your css if you set an specific height or an overflow: hidden to the body or html or maybe a wrapper.

Zooming in Iframe effecting the wrong cursor position in cordova iOS application

This was an old problem that was also faced by me. I have looked into my two year old code for the solution of this problem and here is the solution.

Instead of using the iframe for opening the external link, that would be embedded in another page, I had used the inAppBrowser for this for opening external link.

window.open( encodeURI('externalPage.html') , '_blank', 'location=no','EnableViewPortScale=yes');

Now, what 'EnableViewPortScale=yes' option do. Its set the browserOptions.enableviewportscale to true in CDVInAppBrowser.m that was used in openInInAppBrowser method in same class for UIWebView options . i.e;

self.inAppBrowserViewController.webView.scalesPageToFit = browserOptions.enableviewportscale;

it means the above line is replace to;

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView is actually have a property scalesPageToFit that fits the page to the device width considering the aspect ratio.

Scaling an iframe on Mobile Safari is breaking the iframe's links

It is a known problem. Touch events on a scaled iframe will not work right on iOS. If you are creating the content of the iFrame, you can scale the content body element instead.

Note that even animated translations cause problems on an iOS6 - I had to force a relayout by changing the iframe's top by 1px after the animation finished to get touch events working correctly.

Webkit has an open bug on transformed iframes.

Prevent iPhone from zooming form?

UPDATE:
This method no longer works on iOS 10.

---

It depend from the Viewport, you can disable it in this way:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

add user-scalable=0 and it should work on your inputs as well.

How do you disable viewport zooming on Mobile Safari?

Edit: may not work after iOS 10, please see touch-action based solution below.

Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem.

This works for me on Mobile Safari in iOS 4.2.

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

---

Related Topics