2

我正在构建一个有两个 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>
4

1 回答 1

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

于 2012-12-10T16:31:52.170 回答