2

私のクライアントにはWordPressサイトがあり、1つのページに次の方法でマップが埋め込まれていますiframe：

<iframe 
    src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&amp;hl=en&amp;pcsi=2051297199499108728,1&amp;geocode=FUCmAgIdBaP3-A&amp;sll=33.728064,-117.988603&amp;sspn=0.006295,0.006295&amp;ie=UTF8&amp;view=map&amp;cid=2051297199499108728&amp;hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&amp;hnear=&amp;ll=33.730729,-117.987242&amp;spn=0.005354,0.006437&amp;z=16&amp;iwloc=A&amp;output=embed" 
    height="350" 
    width="690" 
    frameborder="0" 
    marginwidth="0" 
    marginheight="0" 
    scrolling="no">
</iframe>

iPhone でページを表示すると、モバイル フレンドリーにレンダリングiframeされ、ビューポートに合わせてサイズが変更されますが、州と郵便番号が途切れています。iframeと下部のパディングの高さを調整してみましたが、Google側の何かのようです。これを修正する方法はありますか？に青い境界線を追加したので、テキストをクリッピングしてiframeいるのは ではないことがわかります。iframe

スクリーンショットの例

4

2 に答える 2

0

サイトへのリンクを投稿するか、CSS の一部を投稿することをお勧めします。これにより、SO コミュニティが問題をトラブルシューティングしやすくなります。

iframe属性を削除して問題を再現しましたwidth="690"。Wordpress の CSS または JavaScript が幅をオーバーライドし、iframeすべてを iPhone の画面幅に詰め込んでいると思われます。

自動サイズ変更を無効にするために、CSS でiframeanidを指定して幅を明示的に設定しました。

#WidthTest {
    width:690px;
}

とにかく、Wordpress の CSS/JavaScript を掘り下げることで、同様の解決策を見つけることができると確信しています。

于 2013-02-17T21:49:50.737 に答える
-1

コードを編集しました。これは私にとってとてもうまくいきます！必要に応じて幅を変更することもできます。

<iframe width="380" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&amp;hl=en&amp;pcsi=2051297199499108728,1&amp;geocode=FUCmAgIdBaP3-A&amp;sll=33.728064,-117.988603&amp;sspn=0.006295,0.006295&amp;ie=UTF8&amp;view=map&amp;cid=2051297199499108728&amp;hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&amp;hnear=&amp;ll=33.730729,-117.987242&amp;spn=0.005354,0.006437&amp;z=16&amp;iwloc=A&amp;output=embed"></iframe>
于 2013-02-18T06:42:22.080 に答える