允许在iFrame中放大，但不能在iOS中的网页上放大 [英] Allow zooming within iFrame but not on page in iOS

问题描述

我有一个简单的页面

<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上。

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

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

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.

推荐答案

您要求的内容不幸的是，我不能在iframe中放大，不可能。

What you are requesting is unfortunately not possible.

首先，在您的viewport元标记中，content属性指定您的网站的用户根本无法放大。这是user-scalable = no所规定的内容。

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.

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

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.

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

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

https：//开发人员。 apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

其次，由于您的viewport元标记是设置在您的父页面上，这些设置适用于该网页中的任何内容，即iframe。 iframe是否有一个不同的meta'viewport'标签指定不同的设置并不重要，因为它存在并遵守其父级的设置。

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.

这篇关于允许在iFrame中放大，但不能在iOS中的网页上放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！