响应式Maprame服务的iframe

时间:2015-04-17 12:29:38

标签: javascript html css iframe mapbox

我需要你的帮助。

我是一名哥伦比亚数据记者,他对HTML,CSS和JS有一些基本知识,但我一直试图在没有答案的情况下解决这个问题。我已经看过这里和其他论坛,但无法使其发挥作用。

我使用Mapbox JS创建了这个地图,显示了哥伦比亚所有州的学士学位表现的一些数据

http://jsfiddle.net/camilomoreno/rcae1jpo/

这是我的Iframe

<iframe src="http://camilomorenokuratomi.com/infographics/coleducacion/mapbox.html" height="600" width="900" scrolling="no"></iframe>

我想要的是让这张地图反应灵敏。我只对收缩地图的大小感兴趣,但保持比例,就像我在youtube视频甚至谷歌地图中看到的那样,但遗憾的是我无法用我的地图重复相同的过程。

你可以借给我一把手吗?

提前致谢

2 个答案:

答案 0 :(得分:0)

您的问题非常模糊,您能否展示您尝试使用代码做什么?

调整iframe的大小不应影响比率。如果发生了iframe正确调整大小但你的地图内部没有,那么请尝试刷新该地图。

答案 1 :(得分:0)

我也遇到了这个问题,并尝试了这两件事:

  1. 将元名称=“viewport”content =“width = device-width,initial-scale = 1”添加到头部
  2. 在我的div中为移动设备和桌面添加列大小 div class =“。col-xs-4 .col-lg-8”
  3. 它有效......

    请参阅“混合移动设备和平板电脑” - http://getbootstrap.com/examples/grid/以获取更多帮助

    P.S。 stackoverflow不允许我包含大于号和小符号