Question

在您将此标记为重复之前，请告诉您这不是要使iframe重新缩放，我不期待这样的答案：Making an iframe responsive

我的问题很容易解释：我的网站没有meta视口标记，宽度为（假设）1000px。因此，当您在移动设备中加载它时，它会重新缩放以适应360px宽度，而一切都非常小。

现在，我完全知道如何使iframe调整到任何宽度，但问题是正在加载的网站也将以1000px的宽度显示，即使这个视图具有meta视口标记。当然，这个iframe中的所有内容都显示得非常小。

现在的问题是：我可以将该iframe的内容显示为全宽，但不遵守父文档的宽度，而是设备宽度。（显然我不想要一个小的360px iframe）。

这可以帮助您理解： enter image description here

编辑：很多人似乎并不理解这一点，因此解释它的另一种方法是：

选择任何没有视口标记的网站
在其上绘制固定框架
并尝试使iframe看起来像是在新标签页上打开的（默认情况下，iframe的视口将类似于1000px，我希望它是手机的视口尺寸）

Answer 1

如果我理解你的要求是什么，是这是可能的，但由于我无法在小提琴中复制这种情况，所以这里是我测试过的代码之下成功：

非响应式网站（未链接`viewport`）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The non-responsive site</title>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
#wrapper {
    width:1000px;
    margin:0 auto;
}
iframe {
    max-width:1000px;
    width:100%;
    margin:10px auto;
    display:block;
    min-height:400px;
    border:0 
}
</style>
</head>   
<body>
    <div id="wrapper">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae orci a velit pretium commodo. Vivamus ultrices auctor lectus, non semper ipsum dictum eu. Integer nulla arcu, bibendum ac hendrerit at, scelerisque in augue. Proin a nisi et purus pulvinar blandit. Nulla ac diam congue, malesuada nunc vitae, aliquam quam. Praesent volutpat turpis eu orci volutpat iaculis. Vivamus tempus varius sagittis. Sed sollicitudin, dui ac finibus placerat, ante metus volutpat dui, eu feugiat ipsum erat nec libero. Quisque eu viverra ex, sit amet congue orci. Cras porta dignissim diam, in eleifend urna vulputate sit amet. Mauris in malesuada ligula, eget facilisis nisl. Maecenas non enim orci. Nullam porttitor fringilla velit a sodales. Suspendisse et accumsan mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    </div>
    <iframe src="responsive-iframe.html"></iframe>
</body>
</html>

responsive-iframe（meta `viewport`已关联）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
    margin:0;
    padding:0;
}

p {
    color:red;
    font-size:32px;
    background-color:#FEB1C7
}
@media (max-width: 480px) {
    p {
        color:green;
        font-size:48px;
        background-color:#CF0
    }
}
</style>
</head> 
<body>
    <p>I'm green below 480px width, otherwise I'm red</p>
</body>
</html>

注意： <head>标记中的CSS只是制作此演示的快捷方式，我总是建议使用外部CSS文件。

更新（我更新了代码以匹配下面的SS＆＃39;

不响应网站

enter image description here

依赖iframe的网站

iFRAME-RESPONSIVE

Answer 2

当我第一次读到你的问题时，我说不，这是不可能的，但后来我开始思考，我相信我找到了办法。它需要Javascript。

首先，我们需要获得两个值，即文档宽度和设备屏幕宽度。根据您的示例分别为1000px和360px。

我们可以使用document.documentElement.clientWidth获取文档宽度（1000px），使用window.screen.availWidth获得屏幕宽度（360px）

var dw = document.documentElement.clientWidth;
var sw = window.screen.availWidth;

获得这两个值后，我们可以获得视口的scale

var scale = dw/sw;

最后我们将iframe的宽度设置为屏幕宽度（360px），然后将其缩放到之前计算的scale。我们使用CSS转换。

var iframe = document.getElementById('theIframe');
iframe.style.width = dw + 'px';
iframe.style.transform = 'scale(' + scale + ')';

您仍然需要将iframe居中，以便它显示在您想要的位置。您可以iframe.style.transformOrigin = '0 0'使用translate(w/2, h/2)此方法或任何其他方法，例如top:w/2; height:h/2或style.webkitTransform（伪代码）。

此外，您可能需要为某些设备使用浏览器前缀，即style.transform而不是var dh = document.documentElement.clientHeight; iframe.style.height = (0.5 * dh / scale) + 'px'; // percentage based // or... iframe.style.height = (600 / scale) + 'px'; // pixel based。

要计算你可以做的iframe的高度

{{1}}

假设您想要使用50％或600px作为高度。

如果您需要我详细说明并祝您好运，请告诉我！

Answer 3

如果您可以更改iframe的css以使用 min-device-width 媒体查询和 viewport sized typography ，则可以执行此操作。这应该使设备响应，视口大小的排版将根据设备宽度的百分比调整，而不是使用“浏览器缩放”文本。

下面是一个CSS示例：

@media only screen and (min-device-width:25em) {
  body {font-size:3vw; line-height:3.9vw;}
}

Answer 4

您实际需要的是iframe中的iframe。主html不会直接调用目标，而是使用：

<iframe id="myviewport" src="myviewport.html" seamless />

文件myviewport.html将是例如：

<html>
<head>
    <meta name="viewport" content="width=1000, initial-scale=1">
</head>
<body>
    <iframe src="http://target.example.com">
</body>
</html>

您拥有myviewport.html，因此您可以决定对其执行的操作 - 在示例中，我显示了预设的内容宽度，但您可以根据设备，目标页面等操作它，而不会影响父文档的自动缩放。

Answer 5

下面的CSS / HTML示例：

* {
  margin: 0;
  padding: 0
}
.myIframe {
  position: relative;
  padding-bottom: 65.25%;
  padding-top: 30px;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; //<<--- THIS IS THE KEY 
  border: solid black 1px;
}
.myIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div>Some text here</div>
<div class='myIframe'>
  <iframe></iframe>
</div>

注意：这是为了<iframe>响应

是否可以在非响应式网站中加载响应式iframe？

5 个答案:

非响应式网站（未链接`viewport`）

responsive-iframe（meta `viewport`已关联）

是否可以在非响应式网站中加载响应式iframe？

5 个答案:

非响应式网站（未链接viewport）

responsive-iframe（meta viewport已关联）

非响应式网站（未链接`viewport`）

responsive-iframe（meta `viewport`已关联）