问题
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.
回答1:
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
来源：https://stackoverflow.com/questions/6122744/webpage-with-wide-iframe-is-not-scrollable-on-an-iphone-with-viewport