iphone - Google Chart API 在 iPhone 上突破容器

Question

我正在使用 Google 的图表 API 开发一个移动网站。一切都运行得很好，并且像在其他经过测试的设备上一样缩放，但出于某种原因，在 iPhone 上查看时，Google 的“表格”图表正在突破其容器。它在缩小的浏览器窗口、Android 平板电脑和 Galaxy SII 上看起来不错。我已确认这不是移动版 Safari 的问题。

图表通过 iFrame 加载并缩放以适合宽度:其容器的 100%，即 Dreamweaver“Fluid Grid Layout -- Gridcontainer”元素。柱形图和折线图都可以适当缩放到 100%，但表格会增长以容纳所有内容，然后会超出网格容器。

在其他设备上，网格会显示边界内的内容并添加滚动。

这是将图表绘制到页面的 php/html 代码。

<div id="top-prods" class="chart" style="width: 100%; height: 500px;">
<?php
    if($charts->isData() == "true"){
        echo "<iframe id=\"top-chart\" src=\"controls/charts/top_prods.php?loc=".$loc."&comp=".$company_id;
        if($xDate != "") {echo "&xDate=".$xDate;} 
        if($yDate != "") {echo "&yDate=".$xDate;}
        echo "\" style=\"width:100%;\" scrolling=\"no\"></iframe>";
    }
?>

唯一的 css 是在 Gridcontainer 上定义的，因为 iFrame 应该调整大小以适应容器。

如有任何帮助，我们将不胜感激。

Answer 1

看起来您遇到了类似的问题:Responsive iframe (google maps) and weird resizing

第一个答案中的 CSS 看起来很容易移植过来。