Question

我想在iframe中加载一个响应式设计网站作为我网站的一个页面。但是，当它加载到iframe中时，网站会失去响应能力。

使用Mashable.com作为示例（内置于响应式设计中） - 我的代码如下所示：

<body>
    <style>
    body {width:100%;height:100%;margin:0;overflow:hidden;background-color:#252525;}
    #iframe {position:absolute;left:0px;top:0px;}
    </style>

    <iframe id="iframe" name="iframe1" frameborder="0" width="100%" height="100%" src="http://mashable.com"></iframe>
</body>

如果您在手机上访问mashable.com，您会看到响应式设计的实际效果。但是，如果您在手机上访问上面的页面，则mashable的响应式设计无效。

有谁知道如何在div中加载网页并保持其响应式设计？

提前致谢！

Answer 1

将元标记“视口”添加到页面的开头，告诉移动浏览器不缩放页面。桌面上的Safari已默认尊重iframe内容的响应式设计。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0 maximum-scale=1.0" />

在您的手机上打开this JSBin link，以测试元标记和following link ，不用 元标记。要编辑，请打开此JSBin page。

NB。在iPhone 5（iOS6）和Safari 6上测试。

Answer 2

你必须使用jquery：

$('iframe').each(function(){
    var
    $this       = $(this),
    proportion  = $this.data( 'proportion' ),
     w           = $this.attr('width'),
   actual_w    = $this.width();

    if ( ! proportion )
    {
        proportion = $this.attr('height') / w;
        $this.data( 'proportion', proportion );
    }

    if ( actual_w != w )
    {
         $this.css( 'height', Math.round( actual_w * proportion ) + 'px' );
    }
});

参考：https://gist.github.com/aarongustafson/1313517

如何在移动浏览器的iframe中保留响应式设计？

2 个答案: