Question

我有以下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>

我的＆＃34; About.html＆＃34;使用Bootstrap以实现响应性，如果通过我的桌面浏览器访问页面，此响应在iframe中工作，我可以调整窗口大小，iframe的内容也将调整大小，这意味着如果我调整大小400px或类似框架的窗口将显示在“移动模式”中。

但是，一旦我将代码上传到我的服务器并通过手机查看，iframe就没有调整大小，它显示的是桌面版本＆＃39;我的网站。

有什么建议吗？

Answer 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会在需要时自动调整大小。

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

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

1 个答案: