ios - 允许在 iFrame 内缩放，但不能在 iOS 页面上缩放

Question

我有一个简单的页面

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

在它上面，所有东西的大小都可以很好地显示在 iPhone 上。

但是当我在该页面上放置 iframe 时，iFrame 内的所有内容都不可缩放，并缩放到父页面的大小。

我怎样才能只允许在 iframe 内缩放，而不会弄乱我的页面的其余部分？

Answer 1

不幸的是，您的要求是不可能的。

首先，在您的“视口”元标记中，您的“内容”属性指定您网站的用户根本不能缩放。这就是'user-scalable=no'所要求的。

此外，您的最大比例和最小比例设置为 1，因此即使您删除 'user-scalable=no'，由于您没有可供用户放大的缩放范围，缩放也会被禁用。

因此，要为用户启用缩放，您必须删除 user-scalable=no 并设置不同的最小和最大比例值。

请参阅此链接以更好地了解“视口”元标记的设置：

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

其次，由于您的“视口”元标记是在您的“父”页面上设置的，因此这些设置也适用于该页面内的任何内容，即 iframe。iframe 是否具有指定不同设置的不同元“视口”标签并不重要，因为它存在于并遵守其父级的设置。

Answer 2

这可以通过 jQuery 实现。在允许缩放和平移的 div 之外进行缩放和平移时，绑定缩放和平移事件以不执行任何操作。然后对于您想要允许缩放和平移的 div，您可以使用像Panzoom这样的插件，它使用“CSS3 转换和矩阵函数”来允许缩放和平移。

Answer 3

这是不可能的，因为 iOS 不允许缩放 - 您只需滚动 iFrame。这是您拥有的外部网站吗？如果是这样，请更改 CSS 代码并将其添加到视口，就像您在顶部的问题中一样。
或者，您可以使用 PHP 加载数据。您一定会找到解决问题的方法 - 如果没有，请随时提出后续问题。