Question

我正在构建一个我有两个div的页面。一个div用作标题，另一个div包含iFrame。

目前，我有一些JQuery和CSS协同工作，以便根据正在查看的窗口大小调整iFrame的大小。我已经做了一些初步测试，它适用于Firefox，Safari，Chrome，IE 9以及Android 2.3上的默认/股票浏览器。

但是，当我尝试在iPad，iPhone或BlackBerry上查看该页面时，看起来iFrame正在调整大小，但是您无法滚动iFrame页面的全长。你基本上被困住了。但是在Android手机上，我可以向下滚动页面，这很奇怪。

这是我正在使用的CSS代码：

#header {
    float: left;
    width:100%;
    height:75px;
    background: #21a5d3; /* Old browsers */
}

#portal {
    position: fixed;
    top: 75px;
    left: 0px;
    width: 100%;
    bottom: 0px;
    min-width: 100%;
}

iframe#iframeclass { width: 100%; height:100% }

这是HTML：

<div id="header">

</div>
<div id="portal">
    <iframe src="http://www.bbc.co.uk/" id="iframeclass" frameborder="0"></iframe>
</div>

这是我正在使用的JQuery：

<script>
    var widthRatio = $('#portal').width() / $(window).width();
    $(window).resize(function() {
        $('#portal').css({width: $(window).width() * widthRatio});
    }); 
</script>

Answer 1

经过大量的谷歌搜索和反复试验，我设法躲避（不修复）这个问题。

我基本上删除了JQuery代码，当在任何浏览器中加载时，它会给我一个完美的窗口大小。我将#portal代码更改为以下内容：

#portal {
    position: absolute;
    top: 75px;
    left: 0px;
    height:92%;
    width:100%;
    bottom: 0px;
    min-width: 100%;
    -webkit-overflow-scrolling:touch;
}

我不知道-webkit-overflow-scrolling:touch;代码是否真的做了什么，但是我已经被它砍掉了，如果现在这样做我真的不在乎。

这是Apple自2011年以来所知道的一个问题，但是继续进一步打破对这个问题的支持（不解决它）。多么绝对的笑话。

无法让iFrame在iPhone，iPad和BlackBerry上的屏幕上滚动

1 个答案: