iFrame 内容调整大小不适用于移动设备答案

【问题标题】：iFrame content resizing not working on mobileiFrame 内容调整大小不适用于移动设备
【发布时间】：2014-07-09 15:41:44
【问题描述】：

我有以下 HTML 页面：

<html>
<head>
<style>
    #dummy-block {      
        display: block;
        position: relative;
        margin-top: 70px;
        width: 100%;
        height: 70px;
        border: 2px solid red;
    }

    .paragraph {
        display: block;
        position: relative;
        margin-top: 50px;
        width: 100%;
    }
</style>
</head>

<body>

<h1>iFrame Test</h1>
<iframe seamles name="inlineframe" src="About.html" frameborder="1" scrolling="auto" width="100%" height="500px" marginwidth="5" marginheight="5">
</iframe>


<div id="dummy-block">
</div>

<div class="paragraph">
    <h3>Test Paragraph</h3>
    <p>
        Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por   
        scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in 
        li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de 
        un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser 
        necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues 
        coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent 
        lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan 
        lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso 
        it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental 
        es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por 
        scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in 
        li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de 
        un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser 
        necessi far uniform grammatica, pronunciation e plu sommun paroles. 
    </p>
</div>



</body>
</html>

我的“About.html”使用 Bootstrap 来实现响应，如果通过我的桌面浏览器访问页面，这种响应在 iframe 中起作用，我可以调整窗口大小，并且 iframe 的内容也将调整大小，这意味着如果我将窗口大小调整为 400 像素或类似的东西，框架将出现在“移动模式”中。

但是，一旦我将代码上传到服务器并从手机中检查出来，iframe 并没有调整大小，它显示的是我网站的“桌面版本”。

有什么建议吗？

【问题讨论】：

标签： html twitter-bootstrap iframe

【解决方案1】：

我想通了！只要包含 iframe 的页面有：

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

iframe 将在需要时自动调整大小。

好吧，至少在这种情况下这对我有用。

【讨论】：

平板电脑视图是如何做到的？