twitter-bootstrap 响应式地将 Bootstrap 网页嵌入到 iframe 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23652242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsively embed Bootstrap webpage in an iframe
提问by Anton Evangelatov
I am working on a SaaS application, which essentially provides a full webpage to the client. The client can access their page at: http://client.myapp.com. However I want to allow clients to embed this page easily on their website. At the moment I just provide an iframe embed code with stylesheet to reset the margin of the body tag.
我正在开发一个 SaaS 应用程序，它基本上为客户提供了一个完整的网页。客户可以通过以下网址访问他们的页面：http: //client.myapp.com。但是我想让客户轻松地在他们的网站上嵌入这个页面。目前我只是提供了一个带有样式表的 iframe 嵌入代码来重置 body 标签的边距。
<head>
<style type="text/css">
html { overflow: auto; }
html, body, div, iframe { margin: 0px; padding: 0px; height: 100%; border: none; }
iframe { display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden; }
</style>
</head>
<body>
<iframe id="myapp" name="myapp" src="https://client.myapp.com" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</body>
However when they include the iframe, the page is no longer responsive. How can I replicate the responsiveness of the original webpage when using an iframe (or any other way you might suggest) ?
但是，当它们包含 iframe 时，页面不再响应。使用 iframe（或您可能建议的任何其他方式）时，如何复制原始网页的响应能力？
回答by Anton Evangelatov
So I found two solutions to the problem:
所以我找到了两个解决问题的方法：
Solution 1:
解决方案1：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body { margin: 0px; } .embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; min-height: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
</head>
<body>
<div class='embed-container'><iframe src='https://client.myapp.com' style='border:0;'></iframe></div>
</body>
Solution 2:
解决方案2：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
/* Using http://npr.github.io/responsiveiframe/ */
<script src="jquery.responsiveiframe.js"></script>
<script type='text/javascript'>
$(function() {
$('iframe').responsiveIframe({xdomain: '*'});
});
</script>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<iframe src='https://client.myapp.com' style='border:0; width: 100%; height: 100%;'></iframe>
</body>
So far it appears both work just fine on a desktop browser (Chrome, Firefox) and on my mobile (Android 4)
到目前为止，它似乎在桌面浏览器（Chrome、Firefox）和我的手机（Android 4）上都可以正常工作
回答by user4381244
Add something like this
添加这样的东西
@media screen and (min-width: 768px) {
iframe{
min-width:768px;
}
}
@media screen and (min-width: 992px) {
iframe{
min-width:992px;
}
}
@media screen and (min-width: 1200px) {
iframe{
min-width:1200px;
}
}
to your css file.
到您的 css 文件。
These media queries causes the iframe width to match the containing screen width.
这些媒体查询使 iframe 宽度与包含的屏幕宽度相匹配。
回答by jnowland
Ensure that you are using: <meta name="viewport" content="width=device-width, initial-scale=1.0">in your iframes header.
确保您<meta name="viewport" content="width=device-width, initial-scale=1.0">在 iframes 标头中使用：。
