是否可以在非响应式网站中加载响应式iframe？
Van*_*als 18 html javascript css iframe css3
在将此标记为重复之前,请允许我告诉您,这不是关于使iframe重新缩放,我不期望这样的答案:制作iframe响应
我的问题很容易解释:我的网站没有meta视口标记,宽度为(比方说)1000px.因此,当您在移动设备中加载它时,它会重新缩放以适应360px宽度,并且一切都非常小.
现在,我完全知道如何使iframe调整到任何宽度,但这里的问题是正在加载的网站也将显示宽度为1000px,即使这个具有meta视口标记.当然,这个iframe中的所有内容都显示得非常小.
现在的问题是:我是否可以使该iframe的内容以全宽显示,但不服从父文档的宽度,而是服从设备的宽度.(显然我不想要一个小的360px iframe).
这可能有助于您理解: 
编辑:很多人似乎不明白这一点,所以解释它的另一种方法是:
选择任何没有视口标记的网站
在上面涂上固定的框架
并尝试使iframe看起来像是在新标签上打开的(默认情况下,iframe的视口将像1000px一样,我希望它是手机的视口大小)
如果我理解你所问的是什么,是的,这是可能的,但由于我无法在小提琴中复制这种情况,所以这里是我测试成功的代码:
无响应的网站(没有元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>
响应式iframe(元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)
- ScreenShot为非响应网站
- Screenrame为iframe响应网站
当我第一次读到你的问题时，我说不，这是不可能的，但后来我开始思考，我相信我找到了一种方法。它需要 JavaScript。
首先我们需要获取两个值，文档宽度和设备屏幕宽度。根据您的示例，分别为 1000px 和 360px。
我们可以得到文档宽度（1000px）document.documentElement.clientWidth和屏幕宽度（360px）window.screen.availWidth
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.
要计算 iframe 的高度，你可以这样做
var dh = document.documentElement.clientHeight;
iframe.style.height = (0.5 * dh / scale) + 'px'; // percentage based
// or...
iframe.style.height = (600 / scale) + 'px'; // pixel based
假设您想要使用 50% 或 600px 的高度。
如果您需要我详细说明，请告诉我，祝您好运！