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

问题:

I would like to scale an iframe on mobile safari.

I am including an iframe inside a div.

<html>
<body>
    <div id="iframe_container">
        <iframe src="http://jsfiddle.net/viebel/kTzDS/show" style="width:300px;height:300px;"/>
    </div>
</body>
</html>

Now I am scaling the div with this code:

$(function() {
    $('#iframe_container').css({
        '-webkit-transform': 'scale(0.7)',
        '-webkit-transform-origin': '0 0 '
    });
});

On iOS/Safari, the iframe is cut (i.e. can't be entirely seen) while on desktop/chrome, the iframe is not cut.

Here is a jsfiddle page with the code: http://jsfiddle.net/viebel/tJQUH/

Just to clarify: here is a demo page that demonstrates the real problem - when opened on iPad/iPhone Safari - all the three lines should be of the same size: http://jsfiddle.net/viebel/tJQUH/show

Please advice what can I do to see the iframe on Mobile Safari completely uncut?

回答1:

I have made few changes.Especially make the frame-size as 100%. Then try to scale the iframe itself.Check this out

            <!DOCTYPE html>
            <html>
            <head>
              <meta http-equiv="content-type" content="text/html; charset=UTF-8">
              <title> - jsFiddle demo by viebel</title>

              <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

              <link rel="stylesheet" type="text/css" href="/css/normalize.css">
              <link rel="stylesheet" type="text/css" href="/css/result-light.css">

              <style type='text/css'>

              </style>
              <script>
              $(document).ready(function()
              {
                //alert('hai');
                $('#ifd').css({
                    '-webkit-transform': 'scale(1.1)',
                    '-webkit-transform-origin': '0 0',
                    'width': '100%',
                    'height': '100%'
                });
              });

              </script>
            </head>
            <body>
                <div id="iframe_container" style="width:500px;height:400px;border:1px solid black;">
                    <iframe src="http://jsfiddle.net/viebel/kTzDS/show" id="ifd" />
                </div>
            </body>

            </html>

Link to jsfiddle: http://jsfiddle.net/viebel/tJQUH/13

回答2:

There's something wrong happening also on Safari Mac.

As a test, I would try to reload the iframe after changing the iframe_container CSS

var iframe = $('#iframe_container iframe');
iframe.attr('src', iframe.attr('src'));

Let me know if it's better!

回答3:

You are scaling the outer div not the iframe, try scaling the iframe and it might work.

And since you did specify that the iframe should be 300px, it would be easier just set the iframe height and width to 210px since that is 70 percent of 300.