允许在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并设置不同的最小和最大缩放值.

请参阅此链接以更好地了解"viewport"元标记的设置:

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

其次,由于您的"视口"元标记设置在"父级"页面上,因此这些设置适用于该页面中的任何内容,即iframe.iframe是否具有指定不同设置的不同元"视口"标记无关紧要,因为它位于其父级的设置中并且遵守其父级的设置.