用于 Mapbox 服务的响应式 iframe



我需要你的帮助。

我是一名哥伦比亚数据记者,对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 视频甚至谷歌地图中看到的那样,但遗憾的是我无法对我的地图重复相同的过程。

你能帮我一把吗?

提前致谢

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

  1. 在头部添加元名称="视口" 内容="宽度=设备宽度,初始比例=1"
  2. 在我的div 中添加移动和桌面的列大小div class=".col-xs-4 .col-lg-8"

它奏效了...

请参阅"混合手机和平板电脑" - http://getbootstrap.com/examples/grid/以获取更多帮助

附言堆栈溢出不允许我包含大于和小于符号

你的问题很模糊,你能展示你想用代码做什么吗?

调整 iframe 大小不应影响比率。如果 iframe 正在正确调整大小,但其中的地图没有,请尝试刷新该地图。

最新更新