可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I need to scale up an iframe to make it bigger (I have no control over the source code of the iframe's content). I'm trying to achieve it via the -webkit-transform: scale(1.3) CSS property.

The iframe's content is scaled up correctly, but when I try to touch any of the controls in the iframe, then it seems that the touch event is being received at the wrong location (I can see that the control's "shadow" is highlighted at the wrong place upon touch). Therefore event handlers are not working (I suspect they aren't getting called, because the touch is detected at the wrong place). Has anybody encountered this issue? Can it be resolved?

I've created a test case that produces the problem (try it in iPad Safari): http://jsfiddle.net/9vem2/

Source in a more readable format:

Parent page (the container of the iframe):

<!DOCTYPE html>
<html>
<head>
    <title>Parent</title>

    <style type="text/css"> 
        iframe
        {        
            left: 200px;
            -webkit-transform: scale(1.3);
        }
    </style>    
</head>

<body>
    <h2>Parent</h2>
    <iframe src="child.html"></iframe>
</body>
</html>

Child page (iframe content):

<!DOCTYPE html>
<html>
<head>
    <title>Child</title>
</head>

<body>
    <h2>Child</h2>
    <input type="text"></input>
    <button onclick="alert('hello');">Button</button>
</body>
</html>

回答1:

This feels like a hacky solution but as it's fixing what appears to be a bug, I suppose it doesn't matter. Rather than scaling in 2D, I have moved the iframe in 3D, toward the viewer, see this demo: http://jsfiddle.net/ianlunn/MSUmS/

The <body> is made into a 3D space, like so:

body {
 -webkit-perspective: 800px;
}

Then the iframe is moved toward the viewer along the Z axis in that 3D space:

iframe {
    -webkit-transform: translateZ(130px);
}

This may need modification for a real-world application, especially if the iframe is wrapped in something other than the <body>.

回答2:

what may be easier is making the iFrame responsive so if the browser resizes, so does the content that is responsive...This might fix it because scale seems to just scale the frame and not re-adjust content within.

http://jsfiddle.net/D2uBW/

Let me know how close I am to what you are looking for and please comment with any thoughts or fixes.

回答3:

The are some bugs on iframe implementation on iOS 5 as you can see in Phonegap Iframe Usage , even if you are not using phonegap you can find useful tips because is HTMS/JS/CSS based. I cite the last paragraph of that document:

When using native scrolling on iOS 5 and above, iFrames can potentially interfere and cause the scrolling gestures to be incorrectly interpreted. This is a bug within Apple's implementation, and the only workaround is to avoid the use of iFrames or use a different scrolling library (such as iScroll).

Also have you tried a Javascript solutions I think is posible to inject CSS files to the HTML on the iframe from the parent window, because finally it's all loaded in DOM