1

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>";
    }
?>

iFrame はコンテナー内に収まるようにサイズ変更する必要があるため、Gridcontainer で定義されている唯一の css です。

どんな助けでも大歓迎です。

4

1 に答える 1

0

これと同様の問題が発生しているようです:レスポンシブ iframe (Google マップ) と奇妙なサイズ変更

最初の Answer の CSS は、簡単に移植できるように見えます。

于 2013-01-02T03:24:02.420 に答える