移动Safari上，当iframe在div中时被裁剪

Question

移动Safari上，当iframe在div中时被裁剪

8

我希望你能够在移动版Safari上对iframe进行缩放。我在一个div中嵌入了一个iframe。

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

现在我正在使用以下代码对

进行缩放：

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

在iOS/Safari上，iframe被裁剪了（即无法完全显示），而在桌面/Chrome上，iframe则没有被裁剪。这里有一个带有代码的jsfiddle页面：http://jsfiddle.net/viebel/tJQUH/。

只是为了澄清一下：这里有一个演示页面，演示了真正的问题 - 当在iPad/iPhone Safari上打开时，所有三行应该是相同大小的：http://jsfiddle.net/viebel/tJQUH/show。

请建议我该怎么做才能在移动Safari上完全看到未被裁剪的iframe？

- viebel

4个回答

0

在Safari Mac上也出现了一些问题。

作为一个测试，我会尝试在更改iframe_container CSS后重新加载iframe。

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

如果有更好的方法，请告诉我！

- Davide

谢谢！我稍后会尝试并告诉你结果。如果你有其他想法，请分享给我。 - viebel

0

你正在缩放外部 div 而不是 iframe，请尝试缩放 iframe，这可能会起作用。

而且，既然你已经指定了 iframe 应该是 300px，那么将 iframe 的高度和宽度设置为 210px 就更容易了，因为这是 300 的 70%。

- Fireblaze

请你能否 fork 我的 fiddle 并且按照你所提出的修改进行更改，然后将新的链接发送给我吗？这样检查会方便很多。谢谢。 - viebel

0

使用 jQuery 的 $(window).height() 来缩放 iframe，并在屏幕方向改变时计算 iframe 尺寸。

- Abhidev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sunnychayen · Accepted Answer

我做了一些更改，特别是将框架大小设置为100%。然后尝试缩放iframe本身。看看这个。

            <!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>

链接至jsfiddle： http://jsfiddle.net/viebel/tJQUH/13