Ale*_*lex 1 html css iframe mobile responsive-design
我想在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中加载网页并保持其响应式设计？
提前致谢!
将元标记 " viewport " 添加到页面的开头,告诉移动浏览器不要缩放页面.桌面上的Safari已默认尊重iframe内容的响应式设计.
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0 maximum-scale=1.0" />
在您的手机上打开此JSBin链接,使用元标记和以下 没有元标记的链接进行测试.要编辑打开此JSBin页面.
NB.在iPhone 5(iOS6)和Safari 6上测试过.
| 归档时间： |
|
| 查看次数： |
13312 次 |
| 最近记录： |