Javascript 是否可以在非响应站点中加载响应iframe？
在您将其标记为复制之前，让我告诉您，这并不是要使iframe可重新缩放，我也不希望得到这样的答案： 我的问题很容易解释：我得到了一个没有Javascript 是否可以在非响应站点中加载响应iframe？,javascript,html,css,iframe,Javascript,Html,Css,Iframe,在您将其标记为复制之前，让我告诉您，这并不是要使iframe可重新缩放，我也不希望得到这样的答案： 我的问题很容易解释：我得到了一个没有metaviewport标签、宽度（比如）1000px的站点。因此，当您将其加载到移动设备中时，它会重新缩放以适应360px的宽度，所有内容都非常小 现在，我完全知道如何制作iframe来调整任何宽度，但这里的问题是，正在加载的站点也将以1000px的宽度显示，即使这个站点有metaviewport标记。当然，这个iframe中的所有内容也显示得非常小 现在的问
metameta如果您能够将iframe的css更改为使用min device width媒体查询和，则可以执行此操作。这将使设备响应，视口大小的排版将根据设备宽度的百分比调整内容，而不是使用“浏览器缩放”文本 下面是一个CSS示例：
@仅媒体屏幕和（最小设备宽度：25em）{
正文{字体大小：3vw；行高：3.9vw；}
}*{
保证金：0；
填充：0
}
myIframe先生{
位置：相对位置；
垫底：65.25%；
填充顶部：30px；
身高：0；
溢出：自动；
-webkit overflow scrolling:touch；//如果我正确理解了您的问题，是的这是可能的，但由于我无法一蹴而就地复制这种情况，下面是我成功测试的代码：
非响应站点（无metaviewport
链接）
注意：上面
标签中的CSS只是制作此演示的一种快速方法，我始终建议使用外部CSS文件
更新：（我更新了代码以匹配下面的SS）
- 无响应站点的屏幕截图
- iframe响应站点的屏幕截图
当我第一次读到你的问题时，我说不，这是不可能的，但后来我开始思考，我相信我找到了一种方法。它需要Javascript
首先，我们需要得到两个值，文档宽度和设备屏幕宽度。根据您的示例，分别为1000px和360px
我们可以通过document.documentElement.clientWidth
获得文档宽度（1000px），通过window.screen.availWidth
获得屏幕宽度（360px）
var dw = document.documentElement.clientWidth;
var sw = window.screen.availWidth;
一旦我们有了这两个值，我们就可以得到视口的比例
var scale = dw/sw;
最后，我们将iframe的宽度设置为屏幕的宽度（360px），然后将其放大到先前计算的scale
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.webkitttransform
而不是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%或600像素的高度
如果您需要我详细说明并祝您好运，请告诉我！您实际查找的是iframe中的iframe。主html不会直接调用目标，而是使用：
<iframe id="myviewport" src="myviewport.html" seamless />
您拥有myviewport.html
，因此您可以决定对其执行的操作-在示例中，我显示了一个预设的内容宽度，但您可以根据设备、目标页面等进行操作，而不会影响父文档的自动缩放。您可以发布示例plunkr或其他内容吗？（从实体模型上看，您似乎也需要增加iframe的高度，以便iframe本身具有与手机屏幕相同的纵横比）不，不，忘了高度，高度在这里不做任何事情。您可能会被所谓的“真实内容视图”弄糊涂我的意思是，如果在标签上而不是在iframewell上打开，真实的web是如何显示的。如果你想要一个答案，那么你需要向我们展示代码……正如我所说的，plunkr/jsfiddle随便什么…@mb21一个站点呢？也许…：P有一个mcve是有帮助的，看到这个问题是它只会影响字体大小，但不会影响到字体大小宽度和高度不总是在%中，请使用一些特定的代码示例更新您的问题。如果没有看到iframe内的页面css，很难提供任何更详细的建议。我假设您正在创建iframe的内容。如果是这样，我强烈建议您的c使用%如果您希望您的内容真正具有自适应性，则包含元素。重要的不是内部页面，因为iframe可能会加载您想要的任何内容。小型移动设备通常会缩放页面内容，而不是设计为响应。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
<iframe id="myviewport" src="myviewport.html" seamless />
<html>
<head>
<meta name="viewport" content="width=1000, initial-scale=1">
</head>
<body>
<iframe src="http://target.example.com">
</body>
</html>