Ant*_*tov 5 css embed iframe responsive-design twitter-bootstrap
我正在开发一个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>
但是,当它们包含iframe时,页面不再响应.如何在使用iframe(或您建议的任何其他方式)时复制原始网页的响应能力？
所以我找到了两个问题的解决方案:
解决方案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>
解决方案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>
到目前为止,它似乎在桌面浏览器(Chrome,Firefox)和我的手机(Android 4)上运行良好
| 归档时间： |
|
| 查看次数： |
17916 次 |
| 最近记录： |