Question

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

我将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>

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

Answer 1

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

不。顶层文档中的视口设置适用于整个视口。

带框架的文档显示在该视口中，并且其设置适用于它们。

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

避免由父元视口缩放嵌套的iframe

1 个答案: