Question

我的客户有一个wordpress网站，一个页面通过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

Answer 1

我建议发布网站链接或发布一些CSS。这将使SO社区更容易解决问题。

我删除了iframe属性width="690"，从而复制了您的问题。我怀疑Wordpress CSS或一些JavaScript覆盖iframe宽度并将所有内容塞进iPhone屏幕宽度。

要覆盖自动调整大小，我只给了iframe一个id并在我的CSS中明确设置了宽度。

#WidthTest {
    width:690px;
}

无论如何，我相信你可以通过挖掘Wordpress CSS / JavaScript来找到类似的解决方案。

Answer 2

我编辑了代码。这对我很有用！您可能希望根据需要更改宽度。

<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>

谷歌地图iFrame Mobile View被剪辑

2 个答案: