如何在移动浏览器的iframe中保留响应式设计？
如何在移动浏览器的iframe中保留响应式设计？
提问于 2013-06-21 04:47:15
我想加载一个响应式的设计网站在一个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中加载网页并保留其响应式设计吗？
提前感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-06-21 05:00:17
将元标记“”添加到页面的头部，以告知移动浏览器不缩放页面。桌面上的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。
注意：已在iPhone 5 (iOS6)和Safari6上测试。
Stack Overflow用户
发布于 2013-06-21 04:51:20
你必须使用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' );
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17223469
复制相关文章
相似问题
腾讯云开发者
