1

我想在 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 中加载网页并保持其响应式设计？

提前致谢！

4

2 回答 2

9

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

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

在您的手机上打开此 JSBin 链接以使用元标记和以下不带元标记的链接进行测试。要编辑打开这个JSBin 页面。

注意。在 iPhone 5 (iOS6) 和 Safari 6 上测试。

于 2013-06-20T21:00:16.663 回答
0

你必须使用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

于 2013-06-20T20:51:19.600 回答