避免嵌套的 iframe 被父元视口缩放答案

【问题标题】：Avoid nested iframes being scaled by parent meta viewport避免嵌套的 iframe 被父元视口缩放
【发布时间】：2019-09-08 13:42:23
【问题描述】：

是否有解决方案允许嵌套 iframe 由于父 HTML 中的元视口设置而无法缩放。

我在无法编辑的外部移动网站上加载了 iframe，该网站具有以下元视口设置：

<meta name="viewport" content="width=640, user-scalable=no">

当网站加载到宽度为 320 的设备上时，它会将网站缩放 0.5，但它也会缩放该网站上的嵌套 iframe，有没有办法禁用/停止它？

我有这样的东西，iframe 中的嵌套 h1 被缩放 0.5

<html>
  <head>
    <title>Parent</title>
    <meta name="viewport" content="width=640, user-scalable=no">
  </head>
  <body>
    <h1>Whole page is scaled by 0.5</h1>
    <iframe>
      <!-- HTML LOADED BY IFRAME -->
      <html>
      <head>
        <title>Nested iFrame</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      </head>
      <body>
        <h1>Iframe should not be scaled by parents meta viewport?</h1>
      </body>
      </html>
    </iframe>
  </body>
</html>

该解决方案也应该适用于没有为视口元设置固定宽度的网站。

【问题讨论】：

标签： html iframe mobile meta

【解决方案1】：

是否有解决方案允许嵌套 iframe 由于父 HTML 中的元视口设置而无法缩放。

没有。顶级文档中的视口设置适用于整个视口。

加框文档显示在该视口中，其设置适用于它们。

框架文档中的元视口元素被忽略。

【讨论】：