1

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

图表通过 iFrame 加载并缩放以适合宽度：100% 的容器，即 Dreamweaver“流体网格布局 -- 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 应该只调整大小以适应容器。

任何帮助将不胜感激。

4

1 回答 1

0

看起来您遇到了与此类似的问题：Responsive iframe (google maps) 和奇怪的调整大小

第一个答案中的 CSS 看起来可以轻松移植。

于 2013-01-02T03:24:02.420 回答