谷歌地图 iFrame 移动视图被剪裁答案

【问题标题】：Google Maps iFrame Mobile View getting clipped谷歌地图 iFrame 移动视图被剪裁
【发布时间】：2013-01-21 06:29:09
【问题描述】：

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

【问题讨论】：

您可以发布实时链接吗？
运气好能解决这个问题吗？顺便说一句，赏金已经过期了。
运气不好：/浪费了 50 个代表
@Maverick，你试过我的解决方案了吗？我的链接看起来与您的问题相似吗？您是否尝试过其他解决方案？你能发个链接吗？编辑：顺便说一句，如果您对答案和 cmets 反应更快，您的 50 代表就不会被浪费。我们真诚地想提供帮助。

标签： iphone google-maps iframe mobile-safari

【解决方案1】：

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

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

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

#WidthTest {
    width:690px;
}

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

【讨论】：

我看到它不再隐藏换行的文本，而是通过宽度覆盖从手机屏幕边缘渗出。
@Maverick，再次检查该站点。很明显，该解决方案根据您的回复有效。您只需要设置适当的宽度，就不会发生出血。设置宽度将阻止您在问题中报告的问题。

【解决方案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>

【讨论】：