具有宽iframe的网页不能在带有视口的iPhone上滚动 [英] Webpage with wide iframe is not scrollable on an iPhone with viewport

问题描述

我有一个针对移动设备的网页（例如iPhone和Android）。这个页面有一个< iframe> （这显然包含了另一个要呈现的网页）。在iPhone上，页面（和iframe）呈现OK。我已经设置了< meta name =viewportcontent =width = device-width/> ，它应该将视口宽度设置为大约320ish或任何野生动物园现在使用）。然而，我的iframe中的内容宽于320像素宽。

这会导致问题，因为iframe被截断。 iPhone Web浏览器仅显示iframe内容的左侧。由于我有 width =设备宽度，我无法滚动/向左或向右平移查看其余内容。我也无法缩小/放大给自己更多的屏幕空间。

我可以通过设置宽视口来解决此问题（例如<$ c $ （a）页面的其余部分看起来更糟，因为它的宽度比它应该宽，（b）我不是我确信我可以依靠它总是适合800像素，所以我不能确定这将解决一切。

有没有办法确保iframe的内容将始终可见，并且最好是热衷于 width = device-width

FTR我正在使用iPhone 3.这个问题在Android（2.2）上不会发生，默认的Web浏览器会将iframe的内容从iframe中溢出，并且可以向左/向右滚动。

添加 overflow：auto; -webkit-overflow-scrolling：touch; 添加到样式o中f iframe的容器将允许在iOS 5中滚动，但这可能不会100％解决您的问题，因为现在我的iframe不在可滚动区域中呈现内容。

编辑：这个解决方案（信贷给原始用户）是iframe的一个很好的选择：
https://stackoverflow.com/ a / 8529312/1101107

I have a webpage aimed at mobile devices (e.g. iPhone & Android). This page has an <iframe> (that obviously includes another webpage to render). On the iPhone the page (and the iframe) render OK. I have set the <meta name="viewport" content="width=device-width" />, which should make it set the viewport width to about 320ish (or whatever safari uses now). However the content in my iframe is wider than 320ish pixels wide.

This causes a problem because the iframe is truncated. The iPhone web browser only displays the left hand side of the iframe content. Since I have width=device-width, I am unable to scroll/pan left or right to see the rest of the content. I am also unable to zoom out/in to "give myself more screen room".

I can get around this problem by setting a wide viewport (e.g. width=800"), which ensures that the iframe is visible. But (a) the rest of the page looks worse since it's all wider than it should be and (b) I'm not sure I can rely on it always fitting within 800 px, so I can't be sure this will fix everything.

Is there anyway to ensure that the contents of the iframe will always be seen, and preferably, keen the width=device-width

FTR I'm using a iPhone 3. This problem doesn't happen on Android (2.2), the default web browser will 'spill' the contents of the iframe out of the iframe and you can scroll left/right.

解决方案

I have been experiencing the same issue with my HTML 5 web app.

Adding overflow: auto; -webkit-overflow-scrolling:touch; to the style of your iframe's container will allow scrolling in iOS 5, however this might not 100% solve your problem as now my iframe is not rendering the content in the scrollable area.

Edit: this solution (credit to the original user) is a great alternative to a iframe: https://stackoverflow.com/a/8529312/1101107

这篇关于具有宽iframe的网页不能在带有视口的iPhone上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！