iframe 在移动 safari 上的 div 中被剪切答案

【问题标题】：iframe is cut when in div on mobile safariiframe 在移动 safari 上的 div 中被剪切
【发布时间】：2012-03-18 02:03:24
【问题描述】：

我想scale mobile 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>

现在我正在使用以下代码缩放div：

$(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

请告知我该怎么做才能在 Mobile Safari 上看到 iframe 完全未删减？

【问题讨论】：

标签： javascript css ios html mobile-safari

【解决方案1】：

我做了一些改变。特别是将帧大小设置为 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

【讨论】：

能否请您分叉我的小提琴并进行您建议的更改并将链接发送到新的？检查起来会容易得多。谢谢。
你只需保存并部署上面的页面。然后检查 ipad。它正在工作
它工作正常。但在我的真实场景中，iframe 嵌套在divs 的完整层次结构中。所以我需要一种方法来扩展整个层次结构。

【解决方案2】：

Safari Mac 上也发生了一些错误。

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

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

让我知道它是否更好！

【讨论】：

谢谢！我稍后会尝试并让你知道。如果您有任何其他想法，请分享。

【解决方案3】：

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

由于您确实指定 iframe 应为 300 像素，因此将 iframe 的高度和宽度设置为 210 像素会更容易，因为这是 300 的 70%。

【讨论】：

能否请您分叉我的小提琴并进行您建议的更改并将链接发送到新的？检查起来会容易得多。谢谢。

【解决方案4】：

使用jQuery's $(window).height() 缩放 iframe 并计算方向更改时的 iframe 尺寸。

【讨论】：