iframe中的响应式网站

时间:2015-12-08 23:52:27

标签: javascript html css twitter-bootstrap responsive-design

我有一个自适应网站:here

我的目标是将该网站嵌入到iframe中,并且仍然保持响应能力。

我已尝试在JSFiddle中测试嵌入我的网站作为示例:here

我的表格在手机屏幕上显示

enter image description here

我的目标是实现上面的图像

enter image description here

我使用了我在响应式知识工具箱中获得的所有内容。 我使用了bootrap网格系统(col-xs-12)。 我也尝试将它放在我的HTML页面上

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

我希望有人可以填写我错过的内容

2 个答案:

答案 0 :(得分:1)

试试这个:

html,
body {
  height:100%;
  margin:0;
}
iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin:0;
  border: 0;
}
<iframe src="http://45.55.92.53/"></iframe>

答案 1 :(得分:1)

我尝试将其创建为html文件并从手机中加载。响应良好的工作。所以问题在于jsfiddle渲染,而不是在你的代码中。