Webpage with wide iframe is not scrollable on an iPhone with viewport

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 d开发者_C百科oesn'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