html - 无法让 iFrame 在 iPhone、iPad 和 BlackBerry 的屏幕上滚动

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 年以来就知道的问题，但继续进一步中断对此问题的支持(而不是修复它)。真是个笑话。