谷歌地圖的iFrame移動視圖得到修剪

我的客戶有一個WordPress的網站，一個網頁被嵌入通過iframe地圖：谷歌地圖的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的高度以及底部填充，但這似乎是谷歌最終的結果。任何想法如何解決這個問題？我添加了一個藍色邊框我iframe所以你可以看到，它不是被裁剪的文本iframe：

Example screenshot

來源

2013-02-06 Maverick

你可以發佈實時鏈接嗎？ –

有沒有解決這個問題的運氣？順便說一句，賞金已經過期。 – JSuar

不幸：/廢物50 rep – Maverick

我建議發佈一個鏈接到該網站或張貼一些CSS的。這將使SO社區更容易解決問題。

我通過刪除iframe屬性width="690"來複制您的問題。我懷疑WordPress的CSS或一些JavaScript重寫寬度和填充iPhone屏幕寬度的一切。

要覆蓋自動調整大小，我只給了iframe一個id並在我的CSS中顯式設置寬度。

#WidthTest { 
    width:690px; 
}

無論如何，我相信你可以通過挖掘Wordpress CSS/JavaScript找到類似的解決方案。

來源

2013-02-17 21:49:50 JSuar

我看到它不再隱藏包裹的文本，但它會通過寬度覆蓋消除手機屏幕的邊緣。 – Maverick

@Maverick，再次檢查網站。很明顯，解決方案基於您的回覆工作。你只需要設置合適的寬度，以免發生滲色。設置寬度將防止您在問題中報告的問題。 – JSuar

-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-18 06:42:22

谷歌地圖的iFrame移動視圖得到修剪

回答

相關問題