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

【问题标题】：Unable to get iFrame to scroll on screen on iPhone, iPad and BlackBerry无法让 iFrame 在 iPhone、iPad 和 BlackBerry 的屏幕上滚动
【发布时间】：2012-12-10 14:56:21
【问题描述】：

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

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

但是，当我尝试在 iPad、iPhone 或 BlackBerry 上查看页面时，iFrame 似乎正在调整大小，但您随后无法滚动 iFrame 页面的整个长度。你基本上被卡住了。但是在安卓手机上，我可以向下滚动页面，这很奇怪。

这是我正在使用的 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>

【问题讨论】：

标签： html css mobile iframe

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

【讨论】：