iframe size with CSS on iOS
You can make it work by adding a wrapping div with overflow: auto; and -webkit-overflow-scrolling:touch;.Here's your example with it: http://jsfiddle.net/R3PKB/7/
According to previous questions on SO it's a bug since iOS 4. I found more info here:https://stackoverflow.com/a/6721310/1047398iframe on iOS (iPad) content cropping issue
This is an old question, but since it comes first on google and the issue exists on nowadays ios devices, I repost a better fix that I found on this page: How to get an IFrame to be responsive in iOS Safari?
Basically, if you have an iframe with scroll (let's say a twitter widget), the solution above won't work very well because it makes the parent scrollable. The fix that worked for me is replacing height: 100% with height: 1px; min-height: 100%;.