Iphone 谷歌地图iFrame移动视图被裁剪

我的客户有一个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

：

---

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

我通过删除

iframe

属性

width=“690”

复制了您的问题。我怀疑Wordpress CSS或一些JavaScript正在覆盖

iframe

宽度，并将所有内容塞进iPhone屏幕宽度

为了覆盖自动调整大小，我只给了

iframe

一个

id

，并在CSS中显式设置了宽度

#WidthTest {
    width:690px;
}

---

不管怎样，我相信你可以通过挖掘Wordpress CSS/JavaScript找到类似的解决方案

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

我通过删除

iframe

属性

width=“690”

复制了您的问题。我怀疑Wordpress CSS或一些JavaScript正在覆盖

iframe

宽度，并将所有内容塞进iPhone屏幕宽度

为了覆盖自动调整大小，我只给了

iframe

一个

id

，并在CSS中显式设置了宽度

#WidthTest {
    width:690px;
}

---

不管怎样，我相信你可以通过挖掘Wordpress CSS/JavaScript找到类似的解决方案

我编辑了代码。这对我来说太棒了！您可能需要根据需要更改宽度

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

你能发布实时链接吗？解决这个问题运气好吗？顺便说一句，赏金已经过期了。运气不好：/50英镑rep@Maverick，你试过我的解决方案吗？我的链接和你的问题相似吗？你有没有尝试过其他的解决方法？你能发一个链接吗？编辑：顺便说一句，如果你能对答案和评论做出更积极的反应，你的50个代表就不会被浪费了。我们真的在尽力帮助你。你能发布这个链接吗？解决这个问题运气好吗？顺便说一句，赏金已经过期了。运气不好：/50英镑rep@Maverick，你试过我的解决方案吗？我的链接和你的问题相似吗？你有没有尝试过其他的解决方法？你能发一个链接吗？编辑：顺便说一句，如果你能对答案和评论做出更积极的反应，你的50个代表就不会被浪费了。我们真的在尽力帮助。我看到它不再隐藏包装好的文本，而是通过宽度覆盖从手机屏幕边缘流出。@Maverick，再次查看该网站。很明显，根据您的回复，解决方案是有效的。您只需要设置适当的宽度，这样就不会发生出血。设置宽度将阻止您在问题中报告的问题。我看到它不再隐藏包装的文本，而是通过宽度覆盖从手机屏幕边缘流出。@Maverick，再次查看该网站。很明显，根据您的回复，解决方案是有效的。您只需要设置适当的宽度，这样就不会发生出血。设置宽度将防止您在问题中报告的问题。