如何在移动浏览器的iframe中保留响应式设计？ [英] How to preserve responsive design in mobile browser's iframe?
问题描述
我想在iframe中加载响应式设计网站作为我网站的网页之一。
I would like to load a responsive design website in an iframe as one of my website's pages. However, when it's loaded in the iframe, the site loses its responsiveness.
使用Mashable.com作为示例（这是内置响应式设计） - 我的代码看起来像这：
Using Mashable.com as an example (which is built in responsive design)- my code looks like this:
<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的响应设计无法正常工作。
If you go to mashable.com on your phone, you'll see the responsive design in action. However, if you visit the page above on your phone, mashable's responsive design isn't functioning.
有人知道如何在div中加载网页，响应式设计？
Does anyone know how to load a web page in a div and keep its responsive design?
提前感谢！
推荐答案
strong>元标记移动到页面的顶部，以告诉移动浏览器不缩放页面。
桌面上的Safari已默认尊重iframe内容的响应式设计。
Add the meta tag "viewport" to the head of your page to tell the mobile browser not scale the page. Safari on the desktop already respects the responsive design of the iframe content by default.
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0 maximum-scale=1.0" />
打开此JSBin链接，以便测试 元标记和以下内容链接 元标记。要编辑，请打开此 JSBin页面。
Open this JSBin link on your mobile to test with the meta tag and the following link without the meta tag. To edit open this JSBin page.
注意。已在iPhone 5（iOS6）和Safari 6上测试。
NB. Tested on iPhone 5 (iOS6) and Safari 6.
这篇关于如何在移动浏览器的iframe中保留响应式设计？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
