2

我的客户有一个 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剪切文本的：

示例截图

4

2 回答 2

0

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

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

为了覆盖自动调整大小，我刚刚给出了iframeanid并在我的 CSS 中明确设置了宽度。

#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 回答