Question

我有一个具有以下视口的移动Web应用程序。

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />

在我们的移动网络应用程序的一个页面中，我们正在使用iframe嵌入另一个网站。该Web应用程序没有响应，并且头部没有视口meta标签。

我们希望嵌入式站点的视图没有任何初始比例，但是不幸的是，它具有附加的初始比例（可能是1.0）。看起来它是从父框架继承的。浏览器不允许我缩小iframe内容。父网页和嵌入式网页都在同一个域中。

下面是从浏览器生成的代码。

<!DOCTYPE html>
<head>
  <base href="/">
  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <title>title</title>
</head>
<body>
<!-- some content -->
<div>
  <div class="iframe-wrapper">
    <iframe frameborder="0" src="url ot the site>
#document
  <!DOCTYPE html>
   <head>
   <meta name="viewport" content="width=device-width, initial-scale=0">
   ..
   </head>
  <body>
   ...
   </body>
  </html>
</iframe>
</div>
</div>
</body>
</html>

是否有可能为iframe提供不同的视口，而不是从父级重用视口？

将iframe嵌入移动应用中，视口缩放问题

0 个答案: