如何使谷歌电子表格图表响应答案

【问题标题】：How to make google spreadsheet graphs responsive如何使谷歌电子表格图表响应
【发布时间】：2014-08-30 06:10:25
【问题描述】：

<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>

即使将宽度更改为 100%，它也不会使其响应。我将此图嵌入到 WordPress 网站上。

【问题讨论】：

请给我们您的 wordpress 网站地址，以便我们在现场看到问题。
您可以同时输入width="100%" 和style="max-width:100%"。在您的代码中，有一个固定的宽度...
@msbodetti URL - getcsr.com/index.php/256-2
@Valentin Mercier getcsr.com/index.php/256-2
我有一个解决方案，但问题是值不是动态的，他们手动添加了这些值。无论如何要更改它并使用我的谷歌电子表格中的值，就像在谷歌电子表格中一样，我的值会不断变化。 codepen.io/shoogledesigns/pen/BfLkA

标签： css wordpress google-sheets media-queries

【解决方案1】：

将 div 放在该 iframe 周围（作为父元素），并将 CSS“transform: scale(0.5)”设置为该 div。

<div style="transform: scale(0.5, 0.5);">
<iframe ...>
</div>

它将调整整个框架的大小，包括其内容。

【讨论】：

我添加了更多样式：transform: scale(0.5, 0.5) translate(-50%, 0px); width: 200%; 将其向左移动一点并使用整个宽度。否则它也会使用更少的空间。

【解决方案2】：

我已经在网上为您做了一些查看，并有几个解决方案。最受欢迎的方法之一似乎是使用 JQuery 来正确调整 iFrame 的大小。

这里有一个脚本链接：jQuery Responsive iFrame's

<!-- Activate responsiveness in the "child" page -->
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
  var ri = responsiveIframe();
  ri.allowResponsiveEmbedding();
</script>

<!-- Corresponding code in the "parent" page -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
  ;(function($){          
      $(function(){
        $('#myIframeID').responsiveIframe({ xdomain: '*'});
      });        
  })(jQuery);
</script>

从那里只需使 iFrame 的 ID 为 myIframeID 或简单地更改上面脚本中的文本以适应这一点。

如果这对您不起作用，我建议使用我的 Google 搜索字符串来寻找其他可能的解决方案：responsive iframe width

祝你好运！

【讨论】：

嘿，你能告诉我如何把它放在 WordPress 网站上。我对此一无所知。就您的第二个选项而言，我尝试了很多，即使在谷歌搜索之后也没有得到任何解决方案。
我有一个解决方案，但问题是值不是动态的，他们手动添加了这些值。无论如何要更改它并使用我的谷歌电子表格中的值，就像在谷歌电子表格中一样，我的值会不断变化。 codepen.io/shoogledesigns/pen/BfLkA